Последовательная анимация в JQuery

Question

Я вижу много людей, борющихся с этим (включая меня). Я предполагаю, что это в основном из-за того, что вы не знаете, как работают области Javascript.

Слайд-шоу изображений является хорошим примером этого. Так что давайте скажем, что у вас есть серия изображений, первая исчезает в => ждет => исчезает => следующее изображение.

Когда я впервые создал это, я уже немного потерялся. Я думаю, что самой большой проблемой для создания основ является сохранение ее чистоты. Я заметил, что работа с обратными вызовами может быть довольно быстрой.

Чтобы сделать его еще более сложным, большинство слайд-шоу имеют кнопки управления. Далее, предыдущий, перейдите в IMG, пауза, ...

Я пытался это на некоторое время теперь, и это то, где я получил:

$(InitSlideshow); 

function InitSlideshow() { 
    var img = $("img").hide(); 

    var animate = { 
     wait: undefined, 
     start: function() { 
      img.fadeIn(function() { 
       animate.middle(); 
      }); 
     }, 

     middle: function() { 
      animate.wait = setTimeout(function() { 
       animate.end(); 
      }, 1000); 
     }, 

     end: function() { 
      img.fadeOut(function() { 
       animate.start(); 
      }); 
     }, 

     stop: function() { 
      img.stop(); 
      clearTimeout(animate.wait); 
     } 
    }; 

    $("#btStart").click(animate.start); 
    $("#btStop").click(animate.stop); 

}; 

Этот код работает (я думаю), но я Интересно, как другие люди имеют дело с анимацией секвенций в JQuery? Советы и трюки приветствуются. Так что ссылки на хорошие ресурсы, связанные с этой проблемой.

Если это было задано до того, как я удалю этот вопрос. Я сразу не нашел много информации об этом. Я надеюсь, что эта вики сообщества будет верной, поскольку на мой вопрос нет ни одного правильного ответа.

С наилучшими пожеланиями,

Pickels

Answer 1

Я предполагаю, что это в основном из-за не вполне зная, как Javascript прицелы работы.

Javascript scope - это функциональный уровень, а не уровень блока. Это так просто. Если вы объявляете переменную с помощью var в любом месте функции, она видима везде внутри этой функции.

С Javascript 1.7 (подсказка: даже не поддерживается дистанционно с помощью IE) вы можете использовать ключевое слово let, а не ключевое слово var, чтобы объявлять переменные с блочной областью. Это более тесно связано с тем, что Java/C/etc. программисты, как правило, ожидают.