Geek Answers Handbook

Losing hover when animating with jQuery (no mouse movement)

I have this line of thumbnails that I am animating using jQuery.
Each of these thumbnails has a hover and an active class.

They work fine, but when I animate the list, a new thumbnail under my arm doesn’t apply hovering? Do I need to move the mouse a little after each click?

It’s hard to exaggerate .. I made a fiddle here: http://jsfiddle.net/nZGYA/
When you start clicking after thumb 3 without moving the mouse, you see what I mean ...

It works great in FireFox, NOT Safari, Chrome, IE, etc.

Is there anything I can do about this?

For reference, here is my code:

<style type="text/css"> .container { position: relative; overflow: hidden; width: 140px; height: 460px; float: left; margin-right: 100px; background: silver; } ul { position: absolute; top: 10; list-style: none; margin: 10px; padding: 0; } li { margin-bottom: 10px; width: 120px; height: 80px; background: gray; } #list-2 li a { display: block; width: 120px; height: 80px; outline: none; } #list-2 li a:hover { background: teal; } #list-2 li a.active { background: navy; } </style> $(document).ready(function() { var idx_2 = 0; $('#list-2 li a') .click(function() { $('#list-2 > li a').removeClass('active'); $(this).addClass('active'); var id = $('#list-2 li a.active').data('index') - 2; idy = Math.max(0, id * 90); $(this).parent().parent().animate({ 'top' : -idy + 'px' }); return false; }) .each(function() { $(this).data('index', idx_2); ++idx_2; }); }); <div class="container"> <ul id="list-2"> <li><a class="active" href="#"></a></li> <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li> <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li> <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li> <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li> <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li> <li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li> </ul> </div>
+7
source share
3 answers

I only worked on the top list, but I think it all works. let me know if this is what you are looking for.

Here is a violinist

 var idx = 0; $('#list-1 li').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click (function() { var currentindex = $('.active').index(); var selectedindex = $(this).index(); var nexthoverindex = selectedindex + (selectedindex - currentindex); //counter for starting on index 1 if(currentindex === 1 && selectedindex > 2){ nexthoverindex = nexthoverindex - 1; } //counter for starting on index 0 if(currentindex === 0 && selectedindex > 2){ nexthoverindex = nexthoverindex - 2; } //make sure the selection never goes below 0 if(nexthoverindex < 0){ nexthoverindex = 0; } $('#list-1 > li').removeClass('active'); $(this).addClass('active'); var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle idy = Math.max(0, id * 90); $(this).parent().animate({ 'top': -idy + 'px' },200, function(){ $('.hover').removeClass('hover'); if(currentindex > 2 || selectedindex > 2){ $('#list-1 > li').eq(nexthoverindex).addClass('hover'); } }); return false; }).css('cursor', 'pointer').each(function() { $(this).data('index', idx); ++idx; });
+3
source

I have a solution that works in Chrome and IE (not tested in Safari). Basically, I fire the mouseover () event of the element under the mouse in the callback animate () event if the thumbnails are moved. The solution is implemented only for list-1.

 // list 1 var idx = 0; $('#list-1 li').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click(function() { $('#list-1 > li').removeClass('active'); var $active = $(this); $active.addClass('active'); var id = $('#list-1 li.active').data('index') - 2; // take scroll param and subtract 2 to keep selected image in the middle var moveAmount = 90; idy = Math.max(0, id * moveAmount); var oldPos = $active.parent().position().top; $active.parent().animate({ 'top': -idy + 'px' }, function(){ var newPos = $(this).position().top; // Check if we moved if(oldPos - newPos != 0) { var movement = (oldPos - newPos) / moveAmount; $($(this).children()[$active.index() + movement]) .trigger("mouseover"); } }); return false; }).css('cursor', 'pointer').each(function() { $(this).data('index', idx); ++idx; });

And here is the link to my fork in jsfiddle, if you don't check it there - http://jsfiddle.net/jimmysv/3tzAt/15/

+1
source

Hovering binds mouseEnter () and mouseLeave () to an object. I think in this case you are lucky with mouseOver (), although I have not tried it.

What is the difference between mouseover and mouseenter events?

0
source

More articles:


All Articles