How can I track position during jquery hover? Not after stop() -
i'm trying create sliding list of items mimic netflix. looking @ source code have html markup figured out , think have concept pretty much figured out. need able track css right position during hover , other things via function while hovering happening rather after hover stops.
edit: more detail on concept i'm trying achieve. need 2 things while "set" sliding.
when "item' slides off screen needs removed set , re-inserted @ other end of set need way know when has gone off screen in either direction.
i need know when set has slid it's total length in either direction can reset position.
the way can think accomplish illusion of endlessly scrolling set track css position while set sliding. can handle rest think need know how plug .hover() or other way track without interrupting .hover().
i'm open suggestions of other methods if .hover isn't appropriate.
here code
html:
<div id="slider"> <div class="set"> <div class="item"> <img src="img/book.png"> </div> <div class="item"> <img src="img/book.png"> </div> <div class="item"> <img src="img/book.png"> </div> <div class="item"> <img src="img/book.png"> </div> <div class="item"> <img src="img/book.png"> </div> <div class="item"> <img src="img/book.png"> </div> <div class="item"> <img src="img/book.png"> </div> <div class="item"> <img src="img/book.png"> </div> <div class="item"> <img src="img/book.png"> </div> <div class="item"> <img src="img/book.png"> </div> <div class="item"> <img src="img/book.png"> </div> </div><!--end set--> <div class="prevbtn"></div> <div class="nextbtn"></div> </div><!--end slider-->
slider.js:
(function() { var slider = { init: function() { var set = $('#slider .set'), setlength = set.children().length * 190, prev = $('.prevbtn'), next = $('.nextbtn'); self = this; prev.hover(function() { set .css({right: set.position().right}) .animate({right: '-' + setlength + 'px'}, 8000); }, function() { set.stop(); }); next.hover(function() { set .css({left: set.position().right}) .animate({right: setlength + 'px'}, 8000); }, function() { set.stop(); }); } } slider.init(); }());
thank you
i found jquery watch plugin answered question of tracking left position. limited because checks domattrmodified or propertychange , otherwise runs timer check position on intervals don't want performance reasons. looks replacement 'mutation observers' although doesn't seem have plenty browser back upwards yet.
but found marquee plugin ends less code trying track position , perform kinds of crazy math, speed calculations, determining direction, , removing/appending images. going looking more , more on complicated. think i'm going go sec solution. able modify replacing it's setinterval hover functions alter direction based on button hovered , run/stop animation.
i'll utilize , rewrite specific purpose , post here in next day or two.
jquery
No comments:
Post a Comment