CODEWITHSUNDEEP
jquery
user3450590
user3450590

Reputation: 341

hover using mouseenter and mouseleave

i want a hover slider with 4 sides, wherein when i hover on a slide, it enlarges in width and the other 3 decrease i in width. i came up with this code:

$(document).ready(function(){   

        $('.hovermenu li').mouseenter(function(){
            $(this).animate({width: "69%"},250);
            $(this).parent().children('li').not(this).animate({width: "10%"},250);
        });

        $('.hovermenu li').mouseleave(function(){
            $(this).animate({width: "25%"},250);
            $(this).parent().children('li').not(this).animate({width: "25%"},250);
            $(this).not('li').animate({width: "10%"},250);  
        });

    });

but it has a problem.when i hover mouse on one slide individually(not migrating from one slide to another), the script seems to work fine, but when i move my mouse from one slide to another, the 4 slides behave very crazily and keep on changing their widths for a while, even after i keep my mouse out from the slides. The full fiddle is here: http://jsfiddle.net/uprL2/1/

Upvotes: 2

Views: 65

Answers (3)

Sudharsan S
Sudharsan S

Reputation: 15393

Use .stop(true,true) A Boolean indicating whether to complete the current animation immediately. 

 $('.hovermenu li').mouseenter(function(){
       $(this).stop(true,true).animate({width: "69%"},250);
       $(this).parent().children('li').not(this).stop(true,true).animate({width: "10%"},250);
    });

     $('.hovermenu li').mouseleave(function(){
        $(this).stop(true,true).animate({width: "25%"},250);
        $(this).parent().children('li').not(this).stop(true,true).animate({width: "25%"},250);   
    });

DEMO

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

Try to clear the animation queue before starting a new one by using .stop(clearQueue),

$('.hovermenu li').mouseenter(function(){
   $(this).stop().animate({width: "69%"},250);
   $(this).parent().children('li').not(this).stop(true).animate({width: "10%"},250);
});

$('.hovermenu li').mouseleave(function(){
   $(this).stop().animate({width: "25%"},250);
   $(this).parent().children('li').not(this).stop(true).animate({width: "25%"},250);   
});

DEMO

Problem occurs in your case when we try to move the animation to the end state, so try to remove that second parameter from the stop function call. Meaning ask the function to not to jump to the end.

Upvotes: 1

cjnahine05
cjnahine05

Reputation: 203

Try this .hope it helps 

  $('.hovermenu li').mouseenter(function(){
  $(this).stop().animate({width: "69%"},250);
  $(this).parent().children('li').not(this).stop(true,true).animate({width: "10%"},250);
 });

$('.hovermenu li').mouseleave(function(){
  $(this).stop().animate({width: "25%"},250);
  $(this).parent().children('li').not(this).stop(true,true).animate({width: "25%"},250);   
});

Upvotes: 0

Related Questions