Помогите с анимацией =)
есть логотип , который состоит из отдельных букв , нужно чтобы буквы поднимались вверх и опускались после поднятия, но каждая по очереди. За ранее спасибо!
---------------------------------------------------------------------------
$('.block-logo img').each(function(){
var id = $(this).attr('id');
var speed = id*100;
$(this).stop().animate({marginTop:'-20px'},speed).animate({marginTop:'0'},'slow');;
});
HTML <div class="block-logo"> <img src="img/logo/1.png" id="1" /> <img src="img/logo/2.png" id="2" /> <img src="img/logo/3.png" id="3" /> <img src="img/logo/4.png" id="4" /> <img src="img/logo/5.png" id="5" /> <img src="img/logo/6.png" id="6" /> <img src="img/logo/6.png" id="7" /> <img src="img/logo/7.png" id="8" /> </div> |
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script></head>
<body>
<div class="logo">
<div class="letter">M</div>
<div class="letter">y</div>
<div class="letter">L</div>
<div class="letter">o</div>
<div class="letter">g</div>
<div class="letter">o</div>
</div>
<style>
.letter {display: inline-block; position: relative;}
</style>
<script>
function move() {
$(this).animate({top: '-10px'}, function() {
$(this).animate({top: '0px'}, function() {
move.call($(this).next('.letter'));
});
});
}
move.call($('.letter').eq(0));
</script>
</body>
</html>
|
walik,
Спасибо) |
| Часовой пояс GMT +3, время: 00:51. |