Анимация Div с отзывчивостью

Question

Просто нужна небольшая помощь. Я хочу анимировать ниже окна, чтобы реагировать на размер страницы, используя (window) .width(); и (window) .height(); Где я должен реализовать (окно) .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>