Jquery：点击

Question

我想知道我是否可以随机点击动画元素。我有这段代码：

$('.div').click(function(){
       if( $(this).hasClass('active')){
           var divAnim=$(this).animate({bottom:'+=600', left:'+=600'},1000);
           var rand=Math.floor(Math.random() * divAnim);
           rand;
       }
       return true;

  });

但是没有“数学随机”这一行的结果是一样的。是否可以实现更改默认值的随机动画？

Answer 1

以下是jquery站点的示例代码段。注意CSS部分。你的div容器需要一个绝对的位置，所以它知道从哪里开始。

＆＃13;

＆＃13;

function makeNewPosition(){
    
    // Get viewport dimensions (remove the dimension of the div)
    var h = $('#block_wrapper').height() - 50;
    var w = $('#block_wrapper').width() - 50;
    
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}
$( "#go" ).click(function() {

  var pos = makeNewPosition();
  $('#block').animate({ top: pos[0], left: pos[1] });
  
});

＆＃13;

#block_wrapper {
    position: relative;
    width:600px;
    height:400px;
    background:#f4f4f4;
  }
  #block {
    position: absolute;
    background-color: #abc;
    left: 50px;
    width: 50px;
    height: 50px;
    margin: 5px;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="go">&raquo; Run</button>
<div id="block_wrapper">
<div id="block">Hello!</div>
</div>

＆＃13;

＆＃13;

＆＃13;

上面更新了

Answer 2

这个怎么样？ （P.s在我的手机上打字）

 $('.div').click(function(){
   if( $(this).hasClass('active')){

 var randomHeight= Math.floor(Math.random() * $(window).height());


 var randomWidth= Math.floor(Math.random() * $(window).width());


       $(this).animate({bottom: randomHeight, left:     randomWidth},1000);

   }
   return true;

  });