如何使用jQuery在show/hide之间平滑过渡？

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

你为什么不这样做hide(),fadeIn()而不是fadeOut()和fadeIn().使用hide()和fadeIn()看起来光滑和良好.如果使用fadeOut()和编写代码将变得非常复杂fadeIn(),并且很少有人会注意到.

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

简单一点!

Answer 2

问题是每个城市都有单独的里，并且每个城市都位于另一个城市的下方。最好的办法是使用 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;
});