jquery并行动画

Question

我想显示弹出窗口。当用户点击链接时，弹出窗口将显示动画。它会稍微向左移动并同时淡入。我当前的动画代码稍微向左移动但淡入不起作用。这是我的 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();
    }

这是我的 pop 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

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

重要的事情:

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

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