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

问题在于，每个城市都有单独的li，而每个城市都位于另一个城市的下方。你最好的办法是通过添加：

来解决这个问题

.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 3

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

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

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

这会将所有链接放在一个地方，这样在转换期间就不会有任何跳跃。在过渡期间，新元素将逐渐消失，而旧元素逐渐淡出，并且在衰落期间它们会重叠。

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

你有一些城市有多个链接，只需按照上面的说法将它们全部堆叠在每个城市的顶部。这可能不会让任何人感到高兴但是如果你在你的链接上包裹<div>，可以将定位移到<div>和fadeIn / fadeOut { {1}}。或者将每个<div>元素块放在它们自己的绝对位置<li>中，并根据需要淡入和淡出整个列表。

Answer 4

如果您可以更改html，请考虑将发货中心列表放入隐藏的div中，其中包含lists或data类，并从那里克隆到您的.city_list div中选择改变。

请参阅http://jsfiddle.net/rob_cowie/qDFKn/24/

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

4 个答案: