0

我正在尝试淡出一系列 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 上动画。

4

2 回答 2

0

您可以使用.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);
            });*/

        });
于 2013-06-16T18:00:24.933 回答
0

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

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();});
});
于 2013-06-16T18:23:46.743 回答