在我的情况下。滑块显示！我在animate（）函数中通过按钮单击事件添加并删除了几个元素。
我想制作一个内容滑块show.I think：
制作三个div元素：
first: <div class='pre'></div>
second: <div class='currentShow'>contents</div> this is default display contents
three: <div class='next'></div>
和四个链接女巫加载内容：
<a class="btPanel" panel="1">1</a>
<a class="btPanel" panel="2">2</a>
<a class="btPanel" panel="3">3</a>
<a class="btPanel" panel="4">4</a>
所以当我第一次点击内容加载链接时，例如"1"，然后：
div with class "next"加载“1”的内容，然后：
div with class "pre"为div width attibute to "0"设置动画，因此div with class "currentShow"向左滑动并显示div with class "next"内的内容，然后：
我删除div with class "pre"并将original div with class “currentShow"设为第一个div，就像"pre"一样，清除内容，删除类并添加类，最后：
将div with class "next"追加到end.so，所有html structure re-back the original and waiting for next slide.
问题是：当我快速切换内容时，如快速点击链接1,2,3,4。添加和删除，添加类和删除类没有完成工作，所以我得到了多个“内容”和“前”，“下一个”div存在于最后。
但是，当我点击并快速切换动画时。想要删除元素的animate（）函数内的代码没有执行并保持元素存在。那么，有没有办法强制代码在动画内部（ ）函数要执行到最后！
html代码：
<div style=" width:612px; margin:0 auto; overflow:hidden;">
<a href="" id="bt1" class="btPanel" panel="1" style="color:#FFF">panel 1</a>
<a href="" id="bt2" class="btPanel" panel="2" style="color:#FFF">panel 2</a>
<a href="" id="bt3" class="btPanel" panel="3" style="color:#FFF">panel 3</a>
<a href="" id="bt4" class="btPanel" panel="4" style="color:#FFF">panel 4</a>
<div id="igPanelWrap" style=" position:relative; height:30px; width:204px; overflow:hidden; margin:0 auto;">
<div style=" position:absolute; width:612px;height:22px; margin:0 auto; overflow:hidden; left:-204px;" id="igPanel">
<div style="width:200px; border:2px solid #FFF; float:left; color:#FFF;" class="slider pre">empty</div>
<div style="width:200px; border:2px solid #FFF; float:left; color:#FFF;" class="slider currentShow ">2</div>
<div style="width:200px; border:2px solid #FFF; float:left; color:#FFF;" class="slider next">empty</div>
</div>
</div>
</div>
js code：
$('.btPanel').click(function(event){
event.preventDefault();
var panelNum = parseInt($(this).attr('panel'));
if($('#igPanel .panelShow').length){
var currentPanelNum = parseInt($('#igPanel .panelShow').attr('panelNum'));
if(currentPanelNum === panelNum)
return;
if( currentPanelNum > panelNum){
$('#igPanel .pre').
queue(function(next){
$(this).
html(panelNum).
addClass('panelShow').
removeClass('pre').
attr('panelNum',panelNum);
next();
}).
queue(function(next){
$('<div style=" width:0; border:2px solid #FFF; float:left; color:#FFF;" class="slider pre">empty</div>').
prependTo('#igPanel').animate({width:200}, function(){
$('#igPanel .next').remove();
$('#igPanel .slider:last').
html('empty').
removeClass('panelShow').
addClass('next').
removeAttr('panelNum');
});
next();
});
}
else{
/* $('#igPanel .next').html(panelNum).addClass('panelShow').removeClass('next').attr('panelNum',panelNum);
$('#igPanel .pre').stop().animate({width:0}, function(){
$(this).remove();
$('#igPanel .slider:first').html('empty').removeClass('panelShow').addClass('pre').removeAttr('panelNum');
$(' <div style="width:200px; border:2px solid #FFF; float:left; color:#FFF;" class="slider next">empty</div>').appendTo('#igPanel');
});*/
$('#igPanel .next').
queue(function(next){
$(this).
html(panelNum).
addClass('panelShow').
removeClass('next').
attr('panelNum',panelNum);
next();
}).
queue(function(next){
$('#igPanel .pre').animate({width:0}, function(){
$(this).remove();
$('#igPanel .slider:first').html('empty').removeClass('panelShow').addClass('pre').removeAttr('panelNum');
$('<div style="width:200px; border:2px solid #FFF; float:left; color:#FFF;" class="slider next">empty</div>').appendTo('#igPanel');
});
next();
});
}
}
else{
$('#igPanel .next').
queue(function(next){
$(this).
html(panelNum).
addClass('panelShow').
removeClass('next').
attr('panelNum',panelNum);
next();
}).
queue(function(next){
$('#igPanel .pre').animate({width:0}, function(){
$(this).remove();
$('#igPanel .slider:first').html('empty').removeClass('panelShow').addClass('pre').removeAttr('panelNum');
$('<div style="width:200px; border:2px solid #FFF; float:left; color:#FFF;" class="slider next">empty</div>').appendTo('#igPanel');
});
next();
});
}
/*
$('.panelShow').each(function(){
if($(this).attr('display') === 'undefined')
$(this).remove();
});
*/
});
答案 0 :(得分：0)
试试这个，虽然我不认为这是最好的方法，但也许会看一下jQuery Carousel或其他东西：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.btPanel{background:#F00}
.slider{background:#00F; width:200px; border:2px solid #FFF; float:left; color:#FFF; cursor:pointer}
.next{}
.currentShow{}
</style>
<script type="text/javascript" src="./scripts/jquery.js"></script>
<script type="text/javascript">
function changePanel(thisObj, panel)
{
animateWidth = parseFloat($('.currentShow').width());
$('.currentShow').addClass('pre').removeClass('currentShow');
//$('.next').addClass('currentShow').removeClass('next');
$('#igPanel').append('<div class="slider currentShow">'+loadContent(panel)+'</div>');
$('.pre').stop(true,true).animate({'width':"-="+animateWidth+"px"}, function(){
$('.pre').detach();
});
}
function loadContent(panel)
{
switch(panel)
{
case 'panel1':
return "Some Content for Panel 1";
break;
case 'panel2':
return "This is Panel 2";
break;
case 'panel3':
return "Another Panel, this is 3";
break;
case 'panel4':
return "Finally this is Panel 4";
break;
}
}
</script>
</head>
<body>
<div style=" width:612px; margin:0 auto; overflow:hidden;">
<span class="btPanel" onClick="changePanel(this, 'panel1')">panel 1</span>
<span class="btPanel" onClick="changePanel(this, 'panel2')">panel 2</span>
<span class="btPanel" onClick="changePanel(this, 'panel3')">panel 3</span>
<span class="btPanel" onClick="changePanel(this, 'panel4')">panel 4</span>
<div id="igPanelWrap" style=" position:relative; height:30px; width:204px; overflow:hidden; margin:0 auto;">
<div style=" position:absolute; width:612px;height:22px; margin:0 auto; overflow:hidden;" id="igPanel">
<div class="slider currentShow">2</div>
</div>
</div>
</div>
</body>
</html>