2

以前のアニメーションが発生した後に、一連の div をアニメーション化しようとしています。不透明度にアニメーション化される同じ div に .mouseenter と .mouseleave を呼び出そうとしています: 1. 最初のアニメーションは、後で不透明度を変更しようとする試みに取って代わるようです。私は何かをプログラミングするのはまったく初めてで、この問題に対する答えを探しました。特定の問題に関連していると思われる解決策をいくつか試しましたが、常に構文エラーが発生しました。

コードは以下です。不透明度の変更 (.fadeTo) で効果のない 2 回目の試行をコメント アウトしましたが、これは私が試みた唯一の方法ではありません。

    $(document).ready(function(){
$('#work').click(function(){
    $('#portfolio').animate({'margin': '120px 0px 0px 890px','opacity':'1'}, 500);
    $('#sketchbook').animate({'margin': '120px 0px 0px 1045px', 'opacity':'1'}, 550);
    $('#art').animate({'margin': '120px 0px 0px 1200', 'opacity':'1'}, 600);

    $('#bio').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 600);
    $('#blog').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 550);
    $('#inspiration').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 500);
    $('#bottom_bar').animate({'margin-top':'700px', 'height': '15px'},1000);


    });

$('#about').click(function(){
    $('#bio').animate({'margin': '120px 0px 0px 890px','opacity':'1'}, 500);
    $('#blog').animate({'margin': '120px 0px 0px 1045px', 'opacity':'1'}, 550);
    $('#inspiration').animate({'margin': '120px 0px 0px 1200', 'opacity':'1'}, 600)

    $('#portfolio').animate({'margin': '120px 0px 0px 800px','opacity':'0'}, 300);
    $('#sketchbook').animate({'margin': '120px 0px 0px 810px', 'opacity':'0'}, 350);
    $('#art').animate({'margin': '120px 0px 0px 820', 'opacity':'0'}, 400);
    });

});

//FADE IN / FADE OUT

//$('#portfolio').mouseenter(function(){
    //$(this).fadeTo(.7, 'fast');
//});
4

1 に答える 1

1

jQuery.animate には「完全な」コールバックがあり、たとえばそれを使用できます。 http://api.jquery.com/animate/

または、遅延オブジェクトhttp://api.jquery.com/jQuery.Deferredを使用できます。非常に多くの連鎖呼び出しが簡単になる可能性があります。このフィドルをチェックしてください: http://jsfiddle.net/balintbako/8VAZ3/単純な遅延コードについて。

<div id="box"></div>

#box {
    width: 200px;
    height: 200px;
    background-color: black;
}

$(document).ready(function () {    
    $('#box').animate({
       'width': '100'
       }, 200);
    $('#box').animate({
       'height': '100'
       }, 200);
    var def = $('#box').promise();
    def.done(
       function () {
          alert('done');
    });
});
于 2013-06-15T19:51:28.850 に答える