Функция анимации, использующая высоту экрана

Это для моего компьютерного класса для домашней работы. У меня есть куча случайных ящиков, которые начинаются сверху в случайных позициях в пределах определенной области. Домашнее задание состояло в том, чтобы заставить их распределяться случайным образом в верхней части экрана, а затем сбрасывать высоту экрана. Мне удалось выполнить первую часть, чтобы они распространились по верхней части экрана, но чтобы опустить высоту экрана. У меня были интересные результаты, которые действительно заставляли меня смеяться. Вот мой код, я думаю, что проблема в строке 62:Функция анимации, использующая высоту экрана

<head> 
<style> 

body, html { 
    margin: 10px; 
    padding: 10px; 
    position: relative; 
} 

.box{ 
    height: 50px; 
    width: 50px; 
    border: 1px solid black; 
    position: absolute; 
} 

#container{ 
    position: relative; 
    height: 550px; 
} 

#box1{ 
    left: 80px; 
    top: 0px; 
    background: blue; 
} 

#box2{ 
    left: 120px; 
    top: 200px; 
    background: red; 
} 

</style> 
</head> 
<body> 
<div id="header"> 
    <p> score <span id="score">0</span></p> 
</div> 
<div id = "container"> 
    <div id = "box1" class = "box"></div> 
    <div id = "box2" class = "box"></div> 
</div> 



<script src="http://code.jquery.com/jquery-1.11.1.js">        <!--Javascript below this line for speed--> 
</script> 
<script> 

nBoxes = 2; 
score = 0; 

function addBoxes(){ 

    for(i=nBoxes+1;i<nBoxes+30;i++){ 

     $('#container').append('<div id="box' + i + '" class="box"></div>'); 
     $('#box'+i).css('top',-Math.floor(Math.random()*20)).css('left',Math.random()*screen.width); 
     $('#box'+i).animate({height: "100%"},3000); 
    } 
    nBoxes+=30; 
    /*$(".box").dblclick(function(){ 
      console.log($(this).attr("id")); 
      $(this).animate({opacity:0.1, marginLeft:"+=150px" 
      },5000); 
     } 
    )*/ 
    $('.box').click(function(){ 
     $(this).stop(); 
     $(this).remove(); 
     score += 1; 
     $('#score').html(score); 
     return false; 
    } 
    ) 
} 
addBoxes(); 
setInterval(addBoxes,3000); 
</script> 
</body>

Заранее спасибо за вашу помощь.

jsfiddle по запросу: http://jsfiddle.net/19f65ycd/

источник

2014-10-07 daltojam

Хотя я не уверен, , что это вы просили, чтобы исправить это изменение будет делать коробки на самом деле падают:

 $('#box'+i).animate({top: "100%"},3000);

Это изменяет ящик сверху, а не вертикальный размер коробки, который вы здесь сделали:

 $('#box'+i).animate({height: "100%"},3000);

источник

2014-10-07 15:33:32

Спасибо, что я искал :) – daltojam

Я отполировал его немного. Fiddle

var nBoxes = 5; 
var score = 0; 

function addBoxes(){ 

for(i=0;i<nBoxes;i++) 
    {  
     var randomColor = Math.random().toString(16).substring(2, 8); 
     var randomPostion = Math.floor(Math.random() * (600 - 10 + 1)) + 10; 
     var iDiv = document.createElement('div'); 
     iDiv.className = 'box'; 
     iDiv.style.cssText = 'width: 50px;height: 50px; border: 1px solid black; margin: 2px;'; 
     iDiv.style.background = '#' + randomColor; 
     iDiv.style.left = randomPostion + 'px'; 
     iDiv.style.position = 'absolute';    
     $('.box').animate({height: "100%"},3000); 
     document.getElementById('container').appendChild(iDiv);  
    } 
$('.box').click(function() 
       { 
        $(this).stop(); 
        $(this).remove(); 
        score += 1; 
        $('#score').html(score); 
        return false; 
       }) 
} 
addBoxes(); 
setInterval(addBoxes,3000);

источник

2014-10-07 16:34:02

Функция анимации, использующая высоту экрана

ответ

Смежные вопросы