多个 jQuery 效果同时并行答案

【问题标题】：Multiple jQuery-Effects parallel at same time多个 jQuery 效果同时并行
【发布时间】：2012-02-26 00:08:43
【问题描述】：

我想在子菜单中淡入淡出并同时选择位置。

喜欢酷酷的 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);
});

});

Fadein 和填充效果很好。但不是通过淡出。我的错误是什么？

【问题讨论】：

这个平行动画的答案stackoverflow.com/questions/811750/…
在我的回答中查看示例。我一直在使用它并且非常喜欢它。

标签： jquery position jquery-animate parallel-processing fade

【解决方案1】：

我能想到的最好的方法是利用 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);
  });
});

【讨论】：

【解决方案2】：

只需使用 animate() 滚动您自己的动画。并且永远不要忘记先使用stop 取消当前正在运行的动画。

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

【讨论】：

非常感谢罗曼。我尝试了一些东西......请查看我编辑的问题。