jQuery простая левая и правая анимация - PullRequest
Новая
       2

jQuery простая левая и правая анимация

2 голосов
/ 22 мая 2011

Я бы хотел, чтобы стрелка видимо переместилась на цифру и удалила текст на обратном пути.

http://jsfiddle.net/mplungjan/VZsG4/

<span class="arrow">&rarr;</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="span0">zhong</span><span id="span2">1</span><span id="span3">guo</span><span id="span4">2</span>
<br />
<input type="button" id="start" value="start" />
<input type="button" id="reset" value="reset" />

var cnt = 0;
var spanLength = $("span").length;
$("#start").click(function() {
  var tId = setInterval(
    function() {
      if (cnt>spanLength-1) clearInterval(tId);
      $(".arrow").animate(
        {"right": $("#span"+(cnt+1)).position()}, "slow",
          function(){
            $("#span"+(cnt++)).hide(); // remove word
            $("#span"+(cnt++)).hide(); // remove number
            $(".arrow").animate({"left":0}); // move back
          }
      );
    },
  1000);  
});
$("#reset").click(function() {
    clearInterval(tId);
    $("span").each(function() {
        $(this).show();
    });    
});

1 Ответ

6 голосов
/ 22 мая 2011

У вас было несколько проблем с вашим кодом:

  • .arrow нужен CSS с position:relative
  • вам нужно анимировать left не right по стрелке
  • вам нужно получить свойство left position()
  • var tId должно находиться в более широкой области
  • , поскольку .arrow - это диапазон,интервал никогда не очищался
  • вы пропустили #span1, что вызвало ошибку отсутствующего элемента
  • cnt = 0 необходимо добавить в функцию сброса

Смотрите рабочую скрипку здесь → 

var cnt = 0;
var spanLength = $("span").length;
var tId;
$("#start").click(function() {
  tId = setInterval(
    function() {
        if (cnt>=spanLength-1) {
            clearInterval(tId);
        } else {
          $(".arrow").animate(
            {"left": $("#span"+(cnt+1)).position().left}, "slow",
              function(){
                $("#span"+(cnt++)).hide(); // remove word
                $("#span"+(cnt++)).hide(); // remove number
                $(".arrow").animate({"left":0}); // move back
              }
          ); 
        }
    },
  1000);  
});
$("#reset").click(function() {
    clearInterval(tId);
    cnt = 0;
    $("span").each(function() {
        $(this).show();
    });    
});
...