В моей ситуации. Слайдер-шоу! Я получил несколько элементов, добавленных и удаленных с помощью события нажатия кнопки в моей функции animate ().
Я хочу сделать слайдер содержимого. Я подумал:
сделать три элемента 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", очищаю содержимое, удаляю класс и добавляю класс, и final:
добавьте div with class "next" в конец. Поэтому все html structure re-back the original and waiting for next slide.
проблема в том, что когда я быстро переключаю содержимое, например, быстро нажимаю по ссылке 1, 2, 3,4. добавление, удаление и добавление класса и удаление класса не завершили работу, поэтому я получил несколько «содержимого» и «pre», «следующий» div в конце.
Но, когда я нажимаю и быстро переключаю анимацию. Код внутри функции animate (), которая хочет удалить элемент, не выполняется и сохраняет элемент существующим. Так, есть ли способ заставить код внутри 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 код:
$('.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();
});
*/
});
Большое спасибо !!