jquery并行动画

Posted 2023-05-08

【中文标题】jquery并行动画

【英文标题】：jquery parallel animation

【发布时间】：2012-09-13 16:00:06

【问题描述】：

我想显示弹出窗口。当用户单击链接时，弹出窗口将显示动画。它会稍微向左侧动画，同时淡入淡出。我当前的代码稍微向左设置动画，但fadeIn 不起作用。这是我的jQuery代码

showpopup : function (e) 
        e.preventDefault();
        var continent = $(this).attr('rel'),
            pop       = $('<div></div>').addClass('popup').html(continent);

            pop.insertAfter('#continents').stop().animate('left': '550px',100);
            pop.fadeIn();
    

这是我的流行 css

.popup 
width: 300px; height: 200px;
position: absolute;
left: 580px;
top: 40px;
padding: 5px; background: #ccc;
border-radius: 5px;
z-index: 100;
border: 1px solid #ccc;

【问题讨论】：

可能与***.com/questions/1652576/…重复

【参考方案1】：

I created a Fiddle based on your code with a working example.

重要的事情：

pop.animate('left': '550px', 'opacity': 1, 500);

这将确保“left”属性的淡入淡出和动画效果将同时完成。

【讨论】：

我的 Fiddle 不适合你吗？请注意，您需要阅读/理解所有代码行（我需要添加的 pop.css('opacity' : 0); 行）。

【参考方案2】：

我认为您的弹出窗口需要隐藏，fadeIn 才能正常工作。尝试在添加到 DOM 之前添加对 hide() 的调用。

showpopup : function (e) 
        e.preventDefault();
        var continent = $(this).attr('rel'),
            pop       = $('<div></div>').addClass('popup').html(continent);

            pop.hide().insertAfter('#continents').stop().animate('left': '550px',100);
            pop.fadeIn();
    

或将display: none; 添加到您的css：

.popup 
display: none;
width: 300px; height: 200px;
position: absolute;
left: 580px;
top: 40px;
padding: 5px; background: #ccc;
border-radius: 5px;
z-index: 100;
border: 1px solid #ccc;

【讨论】：

现在它会淡入但不会向左移动。