0

I am trying to create a horizontal menu, which when hovered, expands upwords. The problem is when you hover over them all quickly, they have a horrible jumping effect which looks nasty. How can I prevent this, and also is there a better way to write this function?

 $(".toggle_hov").hover(function () {
    $(this).find(".toggle_cont").stop().slideToggle();
    $('.toggle_hov.active').not(this).removeClass('active');
    $(this).toggleClass('active');
    var $this = $(this).parent().find('.toggle_cont');
    $(".toggle_cont").not($this).slideUp();
  });

many thanks

http://jsfiddle.net/Js5Z5/1

3

1 Answer 1

0

I would suggest you use some delay in hover this way it will only open slide up the many if user hovers for given time. it wont slide open if you quickly move over it.

 var delay=500, setTimeoutConst;
    $(".toggle_hov").hover(function () {        
        that = $(this);
         setTimeoutConst = setTimeout(function () {
            $(that).find(".toggle_cont").slideToggle();
            $('.toggle_hov.active').not(this).removeClass('active');
            $(that).toggleClass('active');
            var $this = $(this).parent().find('.toggle_cont');
            $(".toggle_cont").not($this).slideUp();
          }, delay)
    }, function(){
         clearTimeout(setTimeoutConst );

      }); 

Here's jsfiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.