Форум

jeysmook · #1 (**permalink**) 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 · #2 (**permalink**) 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 · #3 (**permalink**) 02.06.2012, 12:03

walik,
Спасибо)

Форум

Справочник

Discord чат

Курсы javascript