Jquery - Removing hover before animation ends

Question

Here is the code:

 $('.rightside').click(function(){
    if($('#clickForm').is(":visible")) {
       $('#clickForm').hide("slide", { direction: "left" }, 500);
       $('.left_slider').animate({left:"0"}, 500).css('background-image','url(images/leftPanel/gear.png)').attr('title','Open');

       $("#blackbg").hide();
    }
    else
    {
       $('#clickForm').show("slide", { direction: "left" }, 500);
       $('.left_slider').animate({left:"314px"}, 500).css('background-image','url(images/leftPanel/close.png)').attr('title','Close');
        $("#blackbg").show();
    }
 });

Problem is this. Here is the picture before animation

before animation

and after animation

after

This stays like this untill i move mouse at least 1px or click. For tooltips i am using tipsy. I can make my own if it will help.

Have you tried to call `$('.rightside').mouseout` before hide clickform ? — Charles Jourdan, Sep 20 '12 at 10:12

score 1 · Answer 1 · edited Sep 20 '12 at 11:22

1

For hover, use the .animate() callback to remove your hover events after animation

JQuery Doc : http://api.jquery.com/animate/

Exemple :

$('.left_slider').animate({left:"0"}, 500, function(){
    $(this).css('background-image','url(images/leftPanel/gear.png)').attr('title','Open');
    //Remove your hover events here
});

edited Sep 20 '12 at 11:22

Goran Jakovljevic

2,714
1
31
27

answered Sep 20 '12 at 10:16

sdespont

13,915
9
56
97

Hover is css. I can move it into jquery, but again I am left with tipsy. I suppose i should check tipsy's hide function and load it also ? Thanks Bouillou. – Goran Jakovljevic Sep 20 '12 at 10:23
Remove your CSS class containing your hover visual effect in the .animate() callback: .removeClass('myClass') – sdespont Sep 20 '12 at 10:35
Sounds good but this solution would remove class completly, which means that next time there wont be this class unless i create new jqury that would add this class on hover. Ill see to move from css to jquery hover solution, its not a problem. Just to figure out tipsy now. – Goran Jakovljevic Sep 20 '12 at 10:50
Ive managed to fix background hover as u suggested but with jquery. Now I need to check how to hide tipsy. Probably just add some function that would hide tipsy on click. Just before animate.. – Goran Jakovljevic Sep 20 '12 at 11:02
1

could help : http://stackoverflow.com/questions/3449321/jquery-how-to-remove-the-tipsy-tooltip – sdespont Sep 20 '12 at 11:11
hehe yes, thats what i used. Thanks for the help Bouillou – Goran Jakovljevic Sep 20 '12 at 11:15

Goran Jakovljevic · Accepted Answer · 2012-09-20T11:24:37.960

To answer my own question if someone else gets same problem:

ALl i had to do is add

$(".tipsy").remove();

just after click function.

So if u are working with jquery animations and having issue with tipsy, just add above code.

Regarding hover, ive did it with jquery. Maybe there was easier and more "correct" way to do this, but untill then, this will do:

    $('.rightside').click(function(){
    $(".tipsy").remove();
    if($('#clickForm').is(":visible")) {
       $('#clickForm').hide("slide", { direction: "left" }, 500);

       $('.left_slider').animate({left:"0"}, 500).css({'background-image':'url(images/leftPanel/gear.png)',
                     'background-color':'#fff'}).attr('title','Open');

       $("#blackbg").hide();
    }
    else
    {
       $('#clickForm').show("slide", { direction: "left" }, 500);
        $('.left_slider').animate({left:"314px"}, 500).css({'background-image':'url(images/leftPanel/close.png)',
                     'background-color':'#fff'}).attr('title','Close');

       $("#blackbg").show();
    }
 });

Jquery - Removing hover before animation ends

2 Answers2