编辑:如果我的标签被关闭会有帮助...没有改进唉。
我想要构建的内容相对简单。类似老虎机的界面,带有“滚动”图像,最终会减慢速度并停止。我使用 jQuery 的 .slideUp() 函数来执行此操作,并且在应用于单个面板时效果很好。但当应用于第二个或第三个时,动画开始表现得很奇怪。
试试这个演示看看我的意思:http://bit.ly/wtiq36
有人知道这是怎么回事吗?我用来模拟动画的技术非常简单,我只是将所有图像堆叠到另一个上,然后将最高的 z-index 交换为最低的 z-index-1,将其放回堆栈的末尾一次SlideUp() 已完成。
(附:我知道这个无限循环,那部分还没有完成:))
这是重要的代码(html 和 js),或者只需检查该链接上的源代码即可了解所有内容。
HTML
<div class="panel one">
<ul>
<li class="item" style="z-index:1"><img src="images/img1.jpg" /></li>
<li class="item" style="z-index:2"><img src="images/img2.jpg" /></li>
<li class="item" style="z-index:3"><img src="images/img3.jpg" /></li>
</ul>
</div>
<div class="panel two">
<ul>
<li class="item" style="z-index:1"><img src="images/img1.jpg" /></li>
<li class="item" style="z-index:2"><img src="images/img2.jpg" /></li>
<li class="item" style="z-index:3"><img src="images/img3.jpg" /></li>
</ul>
</div>
<div class="panel three">
<ul>
<li class="item" style="z-index:1"><img src="images/img1.jpg" /></li>
<li class="item" style="z-index:2"><img src="images/img2.jpg" /></li>
<li class="item" style="z-index:3"><img src="images/img3.jpg" /></li>
</ul>
</div>
还有JS
function testit(n){
$(".panel."+n).each(function() {
secondclass = $(this).attr('class').split(' ')[1]
div = ("."+secondclass+" ul li")
if(secondclass != "stats"){
flip(div)
}
})
}
function flip(div){
highest = gethighZ(div)[1]
highest.slideUp(400,'linear',function(){
lowestZ = getlowZ(div)[0]
highest.css("z-index",lowestZ-1)
highest.show()
flip(div)
})
}
//these 2 functions just return highest/lowest zindex divs
function gethighZ(div){
var index = -999999999999
var result = Array()
$(div).each(function() {
var current = parseInt($(this).css("zIndex"), 10)
if(current > index) {
result[0] = current
result[1] = $(this)
index = current
}
});
return result
}
function getlowZ(div){
var index = 99999999999999
var result = Array()
$(div).each(function() {
var current = parseInt($(this).css("zIndex"), 10)
if(current < index) {
result[0] = current
result[1] = $(this)
index = current
}
});
return result
}
最佳答案
尝试停止之前的所有动画:
highest.stop().slideUp(400,'linear',function(){
lowestZ = getlowZ(div)[0]
highest.css("z-index",lowestZ-1)
highest.show()
flip(div)
})
关于javascript - jquery .slideUp 多次调用时表现奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8909657/