Hide element on mouseover while animate

Question

I want to hide an image during animation on mouse over. here is my code of animation only

 $('#my_img').animate({'bottom':70}, bouncetime, 'easeOutQuad', function() {
 ....
 });

can you please tell me where and how to put mouse over code so that it hides.

thank you

you want to hide an image with animation when the user hovers the mouse on the image? Have I got it right ? — Ajey, Jan 03 '14 at 07:26
no, my image is already in animation, now once i hover it during animation, i need to make it disappear. — Praveen, Jan 03 '14 at 07:28
could you please create a fiddle and update it here so I can have a look at it ? — Ajey, Jan 03 '14 at 07:29
be a good stackoverflow user. Please upvote and accept answers when you've got what you desired. ;) — Ajey, Jan 03 '14 at 07:53

score 0 · Accepted Answer · edited May 23 '17 at 12:19

Not sure how much you know, so to start at the beginning - you will need to put it in a web page (e.g. html) or javascript file.

Inside the web page you will need a script section:

<script type="text/javascript">
</script>

Inside the script you will need to specify the method in jquery (I prefer mouseenter, see here). Something like (updated from your jsfiddle):

$(document).ready(function () {    
    var bouncetime = 1700;
    var ballheight = 280;
    var ballsize = 20;

    $('#my_img').animate({'bottom':20}, bouncetime, 'easeInQuad', function() {
        $('#my_img').animate({'bottom':70}, bouncetime, 'easeOutQuad', function() {             
        });
    });

    $( '#my_img' ).mouseenter( function ()
    {
        $(this).css('visibility','hidden');
    } )

});

Depending on exactly what you want, you could replace the .css(..) with .hide().

You didn't specify it, but to show the image again when the mouse leaves the image, you would do something like (or use hover with two functions rather than mouseenter,mouseleeave see here):

    $( '#my_img' ).mouseleave( function ()
    {
        $(this).css('visibility','visible');
    } )

score 0 · Answer 2 · answered Jan 03 '14 at 07:43

0

add this code at the end of all your animation code

$('#my_img').hover(function(){
      $(this).hide();  
    });

here is the demo: http://jsfiddle.net/Ajey/573ht/

answered Jan 03 '14 at 07:43

Ajey

7,924
12
62
86

Hide element on mouseover while animate

2 Answers2