javascript - jquery slider - animating timeline -
javascript - jquery slider - animating timeline -
i'm using jquery slider function timeline
$("#content-slider").slider({ min: 0, max: 300, step: 1, change: handlesliderchange, //start: getimagewidth, slide: handlesliderslide }); function handlesliderslide(event, ui) { $("#content-scroll").prop({scrollleft: ui.value * (maxscroll / 300) }); if (ui.value >= 7 && ui.value <= 13) { $('#marker_10').animate({opacity: 'hide'}, 100, function () { $(this).parent('div').animate({margintop: '100px'}, {duration:1000, queue:false }).addclass('up').find('p').animate({opacity: 'show'} ) }) } if (ui.value > 13 || ui.value < 7 && ($('div#container_10').hasclass('up'))) { $('div.up').stop(true) $('#container_10').removeclass('up').find('p').fadeout('fast').end().animate({margintop:'165px'}, {duration:500, complete:function() {$(this).find('img.marker').fadein() }, queue:false}) } }
http://asla.dev.1over0.com/html/slider/bacardi_last.html
it animates ok when scroll left right when scroll right left issues elements fading out , displaying correctly info appreciated; done on front end end give thanks you
i don't have solution directly, notes may help.
the downwards animation isn't triggered until slider past left border of active content. right, it's triggered after slider moves off of vertical line.
several of sections have content cutting off bottom - seems simple height issue?
when sliding right left, vertical line doesn't disappear.
you may want add together "title" "#content-slider a" new users may not sure @ first. simple "slide me" suffice :)
one additional note, when browser window little (around 800px or so, didn't check exactly), content jumps below slider bar.
just thinking how i'd approach task; i'd setup animations in function animating up, 1 down. after can verify work on button press (or non-slider trigger) i'd work on ensuring "active" areas setup right on time line (either vertical line or whole "active" content box, i'd in middle). after pieces setup, should easy task trigger motion function when slider in "active" area , downwards when leaves, making sure don't run @ same time.
hope helps!
javascript jquery
Comments
Post a Comment