2015-03-07 2 views
0

Im пытается сделать 2 анимированные коробки в jQuery, CSS и HTML, но код не работает. Я сделал приложение в учебном приложении jQuery, и он отлично работает в приложении. Когда я использую точный код на своем ПК, он не работает. Что не так с моим кодом?Проблемы с анимацией ящиков в jQuery

Heres мой код:

<!doctype html> 
<html> 
<head> 
<title>Testing Stuff</title> 
</head> 
<body> 
<div class="blueBox"></div> 
<div class="redBox"></div> 
<style> 
.blueBox, .redBox { 
    width: 100px; 
    height: 100px; 
    top: 20px; 
    position: absolute; 
} 
.redBox { 
    left: 20px; 
    background-color: red; 
} 
.blueBox { 
    left: 140px; 
    background-color: blue; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    var $blueBox = $('div.blueBox'); 
    var $redBox = $('div.redBox'); 
    $blueBox.animate({left: "500px"}, 2000, function(){alert("Animation Completed!"); 
    }); 
    $redBox.animate({width: "0px", height: "0px", opacity: "0"}, 3000); 

}); 

</script> 
</body> 
</html> 

Спасибо за помощь мне !!

ответ

0

Вам нужно связать код JQuery в вашем HTML:

<script src="http://code.jquery.com/jquery-latest.min.js" 
    type="text/javascript"></script> 

Лучше вы делаете это в теге.

Если вы хотите above v1.11.1, получите код ссылки непосредственно из версии через jQuery download page. Например:

<script src="http://code.jquery.com/jquery-2.1.3.min.js" 
    type="text/javascript"></script> 
+0

Должен ли я связать его с веб-страницей или связать его с документом с этим кодом? – MoosMas

+0

Вам нужно связать код jQuery для каждого документа HTML, который его использует. –

+0

Спасибо, но он по-прежнему не работает? – MoosMas