Animation queue using jQuery slider -
Animation queue using jQuery slider -
i having problem animation queue when using jquery ui slider show/hide , position elements on timeline - slider seems working when go move slider fast animation gets real messy - hoping help @ to the lowest degree helping me making more smooth
here code
$("#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) { (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) { (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) { (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');}
you can see code here http://asla.dev.1over0.com/html/slider/bacardi_five.two.html it's front end end work.
jquery jquery-ui animation uislider
Comments
Post a Comment