Вход

Просмотр полной версии : Помогите с анимацией =)

jeysmook
02.06.2012, 10:39
есть логотип , который состоит из отдельных букв , нужно чтобы буквы поднимались вверх и опускались после поднятия, но каждая по очереди. За ранее спасибо!
---------------------------------------------------------------------------

$('.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>
walik
02.06.2012, 11:43
<!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>
jeysmook
02.06.2012, 12:03
walik,
Спасибо)