Last U-Turn during jQuery Hover Animation

Question

Here is my code: http://jsfiddle.net/ZspZT/

As you can see from the example, the fourth div block flickers slightly, especially on the freezing effect, but also sometimes with other divs.

Thanks in advance!

Answer 1

It looks like the attenuation feature built into .animate causes your percentage widths to be over 100%, causing the last sub-DIV to disappear. There are several ways to solve this problem.

When I replace your percentage widths with fixed numerical widths, the problem goes away. I used this in the code below (and your code had a lot of redundancy to reduce):

$('document').ready(function() { var speed = 450; $('.four-ways-slide').hover(function() { $(this).stop().animate({ width: 425 }, speed).siblings().stop().animate({ width: 25 }, speed); }, function() { $(this).siblings().andSelf().stop().animate({ width: 125 }, speed); }); }); 

http://jsfiddle.net/mblase75/ZspZT/10/

Another possibility is to use percentages of width that are up to 99% instead of 100%, and set the background color on the DIV container to hide the space. Adding linear attenuation to the .animate method allows you to maintain a total width of more than 100%:

 $('document').ready(function() { var speed = 450; $('.four-ways-slide').hover(function() { $(this).stop().animate({ width: '75%' }, speed, 'linear').siblings().stop().animate({ width: '8%' }, speed, 'linear'); }, function() { $(this).siblings().andSelf().stop().animate({ width: '24.5%' }, speed, 'linear'); }); }); #four-ways-slide-4,#four-ways-slider{background:#999999;} 

http://jsfiddle.net/mblase75/ZspZT/9/

Answer 2

try using mouseenter and mouseleave rather than hover. also you should assign variables and not repeat divs

  var one = $('#four-ways-slide-1'); var two = $('#four-ways-slide-2'); var three = $('#four-ways-slide-3'); var four = $('#four-ways-slide-4'); var all = $('.four-ways-slide'); thisIn = function(){ all.animate({width:'8%'},{duration: 450,queue:false}); }; thisOut = function(){ all.animate({width:'25%'},{duration: 450,queue:false}); }; one.mouseenter(function(){ thisIn(); $(this).animate({width:'76%'},{duration: 450,queue:false}); one.mouseleave(function(){ thisOut(); $(this).animate({width:'25%'},{duration: 450,queue:false}); }); });