多个 jQuery 效果同时并行

Posted 2023-05-08

【中文标题】多个 jQuery 效果同时并行

【英文标题】：Multiple jQuery-Effects parallel at same time

【发布时间】：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 和填充效果很好。但不是通过淡出。我的错误是什么？

【问题讨论】：

这个平行动画的答案***.com/questions/811750/…

在我的回答中查看示例。我一直在使用它并且非常喜欢它。

【参考方案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:'...');

【讨论】：

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