CODEWITHSUNDEEP
jqueryjquery-animatetipsy
Goran Jakovljevic
Goran Jakovljevic

Reputation: 2820

Jquery - Removing hover before animation ends

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.

Upvotes: 0

Views: 562

Answers (2)

Goran Jakovljevic
Goran Jakovljevic

Reputation: 2820

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();
    }
 });

Upvotes: 0

sdespont
sdespont

Reputation: 14025

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
});

Upvotes: 1

Related Questions