0

I am programming a section of a website using jquery, where when you mouse over a button it hides a specific div and shows another one, then when the mouse leaves it hides that one and shows the original, and it works great, but when you go over the buttons to fast it gets flickery and starts showing all the divs(doesnt hide some)

My code:

function changeAddPanelText(element, element2) {
    $(element).hover(function(){
        $("#add-content-desc1").toggle();
        $(element2).fadeIn(700);
    },

    function(){
        $(element2).toggle();
        $("#add-content-desc1").fadeIn(700);
    });
}

any ideas ? thanks

Edit: I updated the code to the current version.

flaiks
  • 269
  • 3
  • 13
  • 2
    Try using `stop()` or `stop(1,1)`, more info at the jQuery API. – elclanrs May 08 '12 at 04:07
  • 1
    Another method that works well is to hide one div under the original. Then when you mouse over, just hide the original.That way there's not any blank page showing, just the two images. – JakeParis May 08 '12 at 04:08
  • I had some similar situation and `stop()` can help to fix the issue. Check this out http://stackoverflow.com/q/6224681/707636 – Bongs May 08 '12 at 04:33
  • this happens because every time you hover, the animation triggers, try to play around with the stop(1,1) or changing the 1 to 0. I had the same issue I had to play around with the stop function to fix it – Huangism May 08 '12 at 17:07
  • worked with stop(1,1) before the fadeIn()'s – flaiks May 09 '12 at 07:08

1 Answers1

0

Try this

function changeAddPanelText(element, element2) {
    $(element).hover(function(){
        $("#add-content-desc1, element2").stop().toggle();
    }, function(){
        $("#add-content-desc1, element2").stop().toggle();
    });
}
Bongs
  • 5,502
  • 4
  • 30
  • 50