Question

使用jquery ui滑块显示/隐藏和定位时间轴上的元素时，我遇到了动画队列的问题 - 当你慢慢移动时我的滑块似乎运行良好但是一旦你移动滑块非常快动画变得非常混乱 - 我希望有人可以帮助我至少帮助我让它变得更加流畅

这是代码

  $("#content-slider").slider({animate: true,
min: 0,
max: 290,
step: 10,
change: handleSliderSlide, //handleSliderChange,
//start:    getImageWidth,
//stop: function() {  }},
slide: handleSliderSlide,
stop:handleSliderSlide});
function handleSliderSlide(event, ui) { $('#devilinme').text(ui.value);$("#content-scroll").prop({scrollLeft: ui.value * (maxScroll / 290) });

if (ui.value == 0) {
for (i=0; i<100; i=i+10){
  $('#container_'+i).stop(true, true)
  $('#marker_'+i).stop(true, true)
  $('#text_'+i).stop(true, true)
} 
}
 if (ui.value == 10) {
for (i=0; i<100; i=i+10){
  $('#container_'+i).stop(false, true)
  $('#marker_'+i).stop(false, true)
  $('#text_'+i).stop(false, true)} 
 $('#marker_10').animate({opacity: 'hide'}, 100, function () { $(this).parent('div').animate({marginTop: '100px'}, {duration:1000, queue:false }).addClass('up').find('p').animate({opacity: 'show', bottom: '-150px'} ).addClass('up')})}  else {$('#container_10').find('p').animate({opacity: 'hide', bottom: '-50px'} ).removeClass('up').end().animate({marginTop:'165px'}, {duration:500, complete:function() {$(this).find('img.marker').fadeIn() }, queue:true}).removeClass('up');} if (ui.value == 20) {for (i=0; i<100; i=i+10){
  $('#container_'+i).stop(false, true)
  $('#marker_'+i).stop(false, true)
  $('#text_'+i).stop(false, true)} 
 $('#marker_20').animate({opacity: 'hide'}, 100, function () { $(this).parent('div').animate({marginTop: '125px'}, {duration:1000, queue:false }).addClass('up').find('p').animate({opacity: 'show', bottom: '-150px'} ).addClass('up')}) }else {$('#container_20').find('p').animate({opacity: 'hide', bottom: '-50px'} ).removeClass('up').end().animate({marginTop:'192px'}, {duration:500, complete:function() {$(this).find('img.marker').fadeIn() }, queue:true}).removeClass('up');} if (ui.value == 30) {
for (i=0; i<110; i=i+10){
  $('#container_'+i).stop(false, true)
  $('#marker_'+i).stop(false, true)
  $('#text_'+i).stop(false, true)
} 
  $('#marker_30').animate({opacity: 'hide'}, 100, function () { $(this).parent('div').animate({marginTop: '1px'}, {duration:1000, queue:false }).addClass('up').find('p').animate({opacity: 'show', bottom: '-150px'} ) })}else {$('#container_30').find('p').animate({opacity: 'hide', bottom: '-50px'} ).removeClass('up').end().animate({marginTop:'96px'}, {duration:500, complete:function() {$(this).find('img.marker').fadeIn() }, queue:true}).removeClass('up');}

您可以在此处查看代码http://asla.dev.1over0.com/html/slider/bacardi_five.two.html 目前这都是前端工作。

使用jQuery滑块的动画队列

0 个答案: