Question

我希望在鼠标悬停时动画期间隐藏图像。这是我的动画代码

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

你能否告诉我在哪里以及如何将鼠标放在代码上以便隐藏它。

谢谢

Answer 1

不知道你知道多少，所以从头开始 - 你需要把它放在网页（例如html）或javascript文件中。

在网页内，您需要一个脚本部分：

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

在脚本中你需要在jquery中指定方法（我更喜欢mouseenter，参见here）。像（从你的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');
    } )

});

根据您的需要，您可以将.css（..）替换为.hide（）。

您没有指定它，但是当鼠标离开图像时再次显示图像时，您会做类似的事情（或使用悬停两个函数而不是mouseenter，mouseleeave参见here）：

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

Answer 2

在所有动画代码的末尾添加此代码

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

这是演示：http://jsfiddle.net/Ajey/573ht/

在动画时隐藏鼠标悬停时的元素

2 个答案: