0

追加されて 2 回アニメーション化された一連の 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 を使用しようとしました。これは効果がありませんでした。

編集：3つのサブナビゲーションdivすべてが「subnav」と呼ばれる非表示のdivの子である文字列を追加することで、この問題を修正しました。メニューに関連するスペースを構成できるように配置しました。アイテムは .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 に答える