jquery - jquery并行动画

Question

我想显示弹出窗口。当用户单击链接时，弹出窗口将显示动画。它会稍微向左侧进行动画处理，并同时淡入。我当前的代码将其稍微向左设置动画，但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;
}

Answer 1

我使用一个工作示例根据您的代码创建了一个 Fiddle。

重要的事情：

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

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

Answer 2

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

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;
}