使动画在.click事件上可重复

Question

我正在尝试淡出一系列的div，这些div被添加了两次并设置了动画。我可以做到这一点，但我对如何让它变得可重复感到困惑。这个想法是，单击父div，3个子div动画，它们淡出，当再次单击父div时，一切都会重新开始。代码如下：

$(document).ready(function(){       
$('#work').click(function(){

    $('body').append('<a href="Portfolio/index_portfolio.html"><div id="portfolio"><p>portfolio</p></div></a>').done;
    $('body').append('<a href="Sketchbook/index_sketchbook.html"><div id="sketchbook"><p>sketchbook</p></div></a>').done;
    $('body').append('<a href="Art/index_art.html"><div id="art"><p>art</p></div></a>').done;

    $('#portfolio').animate({'margin': '120px 0px 0px 890px','opacity':.6}, 500, function(){
        $(this).mouseenter(function(){
            $(this).animate({'opacity':1}, 100, function(){});
        });
        $(this).mouseleave(function(){
            $(this).animate({'opacity':.6}, 100, function(){
        });
        });

        setTimeout (function(){
                $('#portfolio').fadeOut(200)
                }, 4000);
    });

    $('#sketchbook').animate({'margin': '120px 0px 0px 1045px', 'opacity':.6}, 550, function(){
        $(this).mouseenter(function(){
            $(this).animate({'opacity':1}, 100, function(){});
        });
        $(this).mouseleave(function(){
            $(this).animate({'opacity':.6}, 100, function(){});
        });
    });

    $('#art').animate({'margin': '120px 0px 0px 1200', 'opacity':'.6'}, 600, function(){
        $(this).mouseenter(function(){
            $(this).animate({'opacity':1}, 100, function(){});
        });
        $(this).mouseleave(function(){
            $(this).animate({'opacity':.6}, 100, function(){});
        });
    });

    $('#bio').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 600, function(){$(this).remove();});
    $('#blog').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 550, function(){$(this).remove();});
    $('#inspiration').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 500, function(){$(this).remove();});


    /*var timer;(document).mousemove(function(){
        if (timer) {
            clearTimeout(timer);
            timer = 0;
            }

            $('#portfolio').fadein();
            timer = setTimeout (function(){
                $('#portfolio').hide(200)
                }, 300);
        });*/

    });

如果这里有外行的错误，请耐心听我说。我对编程非常陌生。我尝试使用var timer，这是我以前不熟悉的。这是没有效果的。

编辑:我通过添加一个字符串修复了这个问题，在这个字符串中，所有三个子导航div都是一个不可见div的孩子，我称之为"subnav“。我将其定位为菜单的相关空间；这些项目在.mouseleave上呈现动画效果。

Answer 1

可以使用.appendTo()将新的div附加到body，并立即插入动画。它应该是有效的。

试试这个：

$(document).ready(function(){       
$('#work').click(function(){    
$('<a href="Portfolio/index_portfolio.html"><div id="portfolio"><p>portfolio</p></div></a>').appendTo('body').animate({'margin': '120px 0px 0px 890px','opacity':.6}, 500, function(){
            $(this).mouseenter(function(){
                $(this).animate({'opacity':1}, 100, function(){});
            });
            $(this).mouseleave(function(){
                $(this).animate({'opacity':.6}, 100, function(){
            });
            });

            setTimeout (function(){
                    $('#portfolio').fadeOut(200)
                    }, 4000);
        });

        $('<a href="Sketchbook/index_sketchbook.html"><div id="sketchbook"><p>sketchbook</p></div></a>').appendTo('body').animate({'margin': '120px 0px 0px 1045px', 'opacity':.6}, 550, function(){
            $(this).mouseenter(function(){
                $(this).animate({'opacity':1}, 100, function(){});
            });
            $(this).mouseleave(function(){
                $(this).animate({'opacity':.6}, 100, function(){});
            });
        });

        $('<a href="Art/index_art.html"><div id="art"><p>art</p></div></a>').appendTo('body').animate({'margin': '120px 0px 0px 1200', 'opacity':'.6'}, 600, function(){
            $(this).mouseenter(function(){
                $(this).animate({'opacity':1}, 100, function(){});
            });
            $(this).mouseleave(function(){
                $(this).animate({'opacity':.6}, 100, function(){});
            });
        });

        $('#bio').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 600, function(){$(this).remove();});
        $('#blog').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 550, function(){$(this).remove();});
        $('#inspiration').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 500, function(){$(this).remove();});


        /*var timer;(document).mousemove(function(){
            if (timer) {
                clearTimeout(timer);
                timer = 0;
                }

                $('#portfolio').fadein();
                timer = setTimeout (function(){
                    $('#portfolio').hide(200)
                    }, 300);
            });*/

        });

Answer 2

每次单击按钮时，您都会追加链接。一种方法是，如果它们已经存在，则在每次单击时将其删除。虽然这不是一个好主意，但它确实有效。

jQuery

$('#work').click(function(){
    $('#portfolio').parent('a').remove();
    $('#sketchbook').parent('a').remove();
    $('#art').parent('a').remove();

    $('body').append('<a href="Portfolio/index_portfolio.html"><div id="portfolio"><p>portfolio</p></div></a>').done;
    $('body').append('<a href="Sketchbook/index_sketchbook.html"><div id="sketchbook"><p>sketchbook</p></div></a>').done;
    $('body').append('<a href="Art/index_art.html"><div id="art"><p>art</p></div></a>').done;

    $('#portfolio').animate({'margin': '120px 0px 0px 890px','opacity':.6}, 500, function(){
        $(this).mouseenter(function(){
            $(this).animate({'opacity':1}, 100, function(){});
        });
        $(this).mouseleave(function(){
            $(this).animate({'opacity':.6}, 100, function(){
            });
        });

        setTimeout (function(){
            $('#portfolio').fadeOut(200)
        }, 4000);
    });

    $('#sketchbook').animate({'margin': '120px 0px 0px 1045px', 'opacity':.6}, 550, function(){
        $(this).mouseenter(function(){
            $(this).animate({'opacity':1}, 100, function(){});
        });
        $(this).mouseleave(function(){
            $(this).animate({'opacity':.6}, 100, function(){});
        });
    });

    $('#art').animate({'margin': '120px 0px 0px 1200', 'opacity':'.6'}, 600, function(){
        $(this).mouseenter(function(){
            $(this).animate({'opacity':1}, 100, function(){});
        });
        $(this).mouseleave(function(){
            $(this).animate({'opacity':.6}, 100, function(){});
        });
    });

    $('#bio').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 600, function(){$(this).remove();});
    $('#blog').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 550, function(){$(this).remove();});
    $('#inspiration').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 500, function(){$(this).remove();});
});