Селектор :animated позволяет нам делать выборку элементов у которых на момент выборки срабатывает анимация. Для примера создадим 3-и одинаковых стилями div блока и кнопку для выполнения выборки блоков с анимацией и изменением стиля:

  <input type="submit" value="Изменить класс для блока с анимацией" id="run" /> 
  <div></div> 
  <div id="mover"></div> 
  <div></div>

CSS стили для блоков сделаем:

  <style> 
  div { background:#0000FF; border:1px solid #сссссс; width:100px; height:100px; margin:0 5px; float:left; } 
  div.color { background:#00FF00; } 
  </style>

Кроме того, мы создали класс .color который будет изменяться для наглядности примера

Теперь давайте создадим скрипт который:

1) При загрузке страницы запуститься зацикленная функция animateIt и начнет анимацию

2) При нажатии на кнопку с ID run – смена класса блока (в нашем примере – изменение его фона)

<script> 
$(document).ready(function() { 
    $("#run").click(function(){ 
      $("div:animated").toggleClass("color"); 
    }); 
    function animateIt() { 
      $("#mover").slideToggle("slow", animateIt); 
    } 
    animateIt(); 
}); 
</script>

Добавлено: 17 Сентября 2013 12:11:21 Добавил: Андрей Ковальчук Нравится 0

Добавить