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附加到正文，然后立即插入动画。它应该工作。
试试这个：

$(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();});
});

在.click事件中制作动画可重复

2 个答案: