応答性のあるDivのアニメーション

Question

ちょっとした助けが必要です。私は（ウィンドウ）.width（）;を使用して、ページのサイズに応答するために、ボックスの下にアニメートしたい。と（窓）。高さ（）; どこで（ウィンドウ）.width &高さ関数を実装する必要がありますか？ここで私はこれまでやっていることです：

コード：

$(document).ready(function(){ 
      $(".box").click(function(){ 

       run(); 

      }); 
     }); 

     function run(){ 
      var duration=1000; 
      var width=$(window).width(); 
      var height=$(window).height(); 
      $(".box").animate({"marginLeft":"1000px"},duration,function(){ 
       $(this).animate({"marginTop":"600px"},duration,function(){ 
        $(this).animate({"marginLeft":"0px"},duration,function(){ 
         $(this).animate({"marginTop":"0px"},duration,function(){ 
          run(); 


         }); 
        }); 
       }); 
      }); 

     } 

CSS：あなたはちょうどあなたのウィンドウの幅と高さ、高さと幅うちタックを使用する必要が

.box{border:1px solid black; width:200px; height:200px; float:left;} 

Answer 1

このような箱：

$(document).ready(function() { 
 
    $(".box").click(function() { 
 

 
    run(); 
 

 
    }); 
 
}); 
 

 
function run() { 
 
    var duration = 1000; 
 
    var width = $(window).width(); 
 
    var height = $(window).height(); 
 
    $(".box").animate({ 
 
    "marginLeft": width - 200 //<----- 
 
    }, duration, function() { 
 
    $(this).animate({ 
 
     "marginTop": height - 200 //<----- 
 
    }, duration, function() { 
 
     $(this).animate({ 
 
     "marginLeft": "0px" 
 
     }, duration, function() { 
 
     $(this).animate({ 
 
      "marginTop": "0px" 
 
     }, duration, function() { 
 
      run(); 
 

 

 
     }); 
 
     }); 
 
    }); 
 
    }); 
 

 
}

.box { 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    height: 200px; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 

 
</div>