остановить анимацию JQ - PullRequest
Новая
       30

остановить анимацию JQ

0 голосов
/ 18 декабря 2008

У меня проблема в том, что я не знаю, как остановить мою функцию при наведении мыши и перезапустить ее при помощи mouseout

сначала вот мой тест-код: 

  <script type="text/javascript">

  function fadeEngine(x) {

  var total_divs=3; //setze hier die nummer der gewollten divs

                  var y=x;

                  if(x==total_divs) y=1; else y++;

                  $("#fade"+x).css("display","none");

                  $("#fade"+y).fadeIn("slow");

                  setTimeout('fadeEngine('+y+')',3000); //modifi alle 3000 miliseconds nen neuen div
          }

        fadeEngine(0); //Initialisation des Scripts

  </script>

<script type="text/javascript">
$(document).ready(function(){
/*
    $("#container").hover(function(){
            stop('mouse over');
    },function(){
            alert('mouse out');
    });
*/
/*
$("#container").hover(function()
   {
      $(this).stop().fadeTo("slow", 1.00);
   },
   function()
   {
      $(this).stop().fadeTo("fast", 0.50);
   });
*/



});

</script>
</head>
<body>

<div id="container" style="width:200px;height:200px;background:#afafaf;color:#red;">

    <div id="fade1">Content  one</div>
    <div id="fade2" style="display:none">Content  two</div>
    <div id="fade3" style="display:none">Content three</div>
</div>
    <div class="blocker">&nbsp;</div>
</body>
</html>

Как я могу сделать это, чтобы остановить мою функцию fadeEngine, если я перейду через contentdiv и запустил его, если я перехожу из div?

Большое спасибо за помощь

Ответы [ 4 ]

1 голос
/ 18 декабря 2008

Дайте всем вашим #fade X элементам класс (скажем .faders) и затем используйте: 

$('.faders').stop();

Или присвоите контейнеру div идентификатор, подобный #faderbox, и скажите: 

$('#faderbox div').stop();
0 голосов
/ 18 декабря 2008

Попробуйте применить поведение остановки к каждому элементу, который требует этого, например: 

$('.faders').each(function () {
  $(this).mouseover(function () {
    $(this).stop(); 
  });
});
0 голосов
/ 18 декабря 2008

Если это просто случай прикрепления анимации к мыши над bevahiour и т. Д. Попробуйте это: 

$(this).mouseover(function () {

    // stops the hide event if we move from the trigger to the popup element
    if (hideDelayTimer) clearTimeout(hideDelayTimer);

    // don't trigger the animation again if we're being shown, or already visible
    if (beingShown || shown) {
      return;
    } else {
      beingShown = true;

      // (we're using chaining) now animate
      this.animate({
        //some animation stuff
      }, function() {
      // once the animation is complete, set the tracker variables
        beingShown = false;
        shown = true;
      });
    }
}).mouseout(function () {

    // reset the timer if we get fired again - avoids double animations
    if (hideDelayTimer) clearTimeout(hideDelayTimer);

     // store the timer so that it can be cleared in the mouseover if required
    hideDelayTimer = setTimeout(function () {
      hideDelayTimer = null;
      this.animate({
         //some animation stuff
      }, function () {
      // once the animate is complete, set the tracker variables
        shown = false;
         });
      }, hideDelay);
});
0 голосов
/ 18 декабря 2008

Я не совсем уверен, что именно вы хотите сделать в отношении эффектов fadeIn и fadeOut в вашем fadeEngine, однако я могу дать вам два совета:

Вы можете использовать эффект jQuery stop() для остановки всех текущих анимаций jQuery на выбранных элементах. Например: 

$("#fade"+y).stop();

Остановит анимацию затухания для этого элемента в его текущем состоянии. Затем вы можете сбросить CSS, если хотите.

Чтобы не вызывать функцию, которую вы ранее поставили в очередь с setTimeout, вы должны получить возвращаемое значение и вызвать clearTimeout(). Например: 

var timeout = setTimeout('fadeEngine('+y+')',3000);
// later...
clearTimeout(timeout);

Это удалит ожидающее событие тайм-аута и предотвратит его возникновение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...