动画出现在mousedown上并在鼠标上消失

时间:2015-01-07 05:59:55

标签: hide show-hide clickable mousedown mouseup

我对jQuery非常陌生,我试图弄清楚当一个人点击并按住然后在鼠标按下时消失时如何制作动画或图像。我有点想通过这段代码来解决这个问题:

<script>
$( "#clicky" )
  .mousedown(function() {
      $( this ).html('<img src="images/Diana.gif" style="width:500px;"/>');
  })

  .mouseup(function() {
    $(this).hide();
  });
</script>

但整个div在mouseup上消失了!我想这样做,所以它可以一遍又一遍地点击。也许我指的是错误的东西?谢谢你的帮助!

1 个答案:

答案 0 :(得分:2)

这是一个例子:

$(document).on('mousedown',function(){
      $( "#clicky" ).show().html('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/2000px-Apple_logo_black.svg.png" style="width:70px;"/>');
      })
     .on('mouseup',function() {
        $( "#clicky").hide();
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clicky"></div>