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; 

    }); 

但是結果是一樣的，沒有行「Math Random」。是否有可能實現一個隨機動畫來改變默認值？

Answer 1

這個怎麼樣？ （P.在我的手機上打字）

$('.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; 

    }); 

Answer 2

這是jQuery網站的示例片段。注意CSS部分。你的div容器需要一個絕對的位置，所以它知道從哪裏開始。

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

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

<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>

修訂剪斷以上