如何使用jQuery实现显示/隐藏之间的平稳过渡？

Question

我有一个城市的选择名单和购物中心的清单。选择一个城市，会显示出那个城市的购物中心。

我的“问题”是，在一个城市隐藏购物中心和为另一个城市展示购物中心之间的过渡并不顺利。“颠簸”。

你可以在这里看到我的意思：http://jsfiddle.net/egUHN/12/

实现平稳过渡的最佳途径是什么？我也试过使用show/hide，但没有用。

更新

@Zanfa通过使用[promise().done()][1]提出了一个很好的解决方案。

$('.city_list .city').fadeOut('normal').promise().done(function() {
    jQuery('.city_list .' + shmall_selected_city).fadeIn('normal');
});

我稍后会测试这个。

Answer 1

问题是，每个城市都有各自的李，每个城市都放在另一个城市的下面。最好的方法是用CSS来解决这个问题，方法是添加：

.city_list .city { 
    position: absolute;
    display: none; 
}

唯一的问题是，拥有多个购物中心的城市将被聚集在一起，您可以通过将最后一个jQuery行(fadeIn)更改为：

var count = 15;
jQuery('.city_list .' + shmall_selected_city).each(function(){
    jQuery(this).fadeIn('normal');
    jQuery(this).css('top',count + 'px');
    count += 15;
});

Answer 2

你为什么不直接做hide()和fadeIn()而不是fadeOut()和fadeIn()。使用hide()和fadeIn()看起来很顺利而且很好。如果使用fadeOut()和fadeIn()，代码将变得非常复杂，很少有人会注意到。

试试这个：http://jsfiddle.net/egUHN/8/

简单点！

Answer 3

您可以尝试在左上角绝对定位<a>元素：

.city_list { 
    /* ... */
    position: relative;
}

a {
    /* ... */
    position: absolute;
    left: 0;
    top: 0;
}

这将把所有的链接放在一个地方，这样就不会有任何跳跃在过渡期间。在过渡过程中，新元素将逐渐消失，而旧元素将逐渐消失，在衰退过程中它们将相互重叠。

例如：http://jsfiddle.net/ambiguous/tv9NA/

你有一些城市有多个链接，只要做上面的事情，它们就会层出不穷。这可能不会让任何人感到非常高兴，但如果您将一个<div>包在您的链接周围，将定位移动到<div>和fadeIn/fadeOut <div>。或者将每个<li>元素块放在自己的绝对位置<ul>中，并根据需要淡出整个列表。