同時に複数のjQuery-Effectsパラレル

Question

私はサブメニューをフェードインして、同時にポジションを決めたいと思います。

クールなCoda-Tooltip（http://panic.com/coda/）のように、「ダウンロード」が好きです。

私のコードだけフェードにこの時の操作を行います。

$(document).ready(function(){ 
    $('#access').hover(function() { 
     $(this).children('ul').fadeIn(); 
     $(this).children('ul')...position(); 

    }, function() { 
     $(this).children('ul').fadeOut('slow'); 
     $(this).children('ul')...position(); 
    }); 
}); 

おかげ インゴを

今、私はこれを行う：

$(document).ready(function(){ 
$('#access').hover(function() { 
    $(this).children('ul').stop().animate({opacity:1, paddingTop:'10px'}, 400); 

}, function() { 
    $(this).children('ul').stop().animate({opacity:0, paddingTop:'0px'}, 300); 
}); 

}）;

フェーディンとパッディングが大きく機能します。しかし、fadeOutではなく。私の間違いは何ですか？

Answer 1

animate（）を使用して独自のアニメーションをロールするだけです。 stopを使用して、現在実行中のアニメーションを最初にキャンセルすることを忘れないでください。

$(this).find('ul').stop().animate({opacity:1, top:'...', left:'...'}); 

Answer 2

私は考えることができる最善のは、jQuery swichClassを利用することです。それはanimateimplicitlyを使用します。

チェックアウトこのフィドル例を：http://jsfiddle.net/xyDwV/1/

CSS：

.before{ 
    background-color : red; 
    height : 400px; 
    width :200px; 
    opacity : 1; 
} 
.after{ 
    background-color : blue; 
    height : 200px; 
    width : 400px; 
    opacity : 0.5; 
} 

jqueryの：

$(document).ready(function(){ 
    $('#mydiv').hover(function() { 
     $(this).switchClass('before','after',500); 
    }, function() { 
     $(this).switchClass('after','before',500); 
    }); 
});