ansaurus

Question

stop the animation jQ

Answer 1

A:

I'm not sure exactly what you want to happen with regards to your fadeIn and fadeOut effects in your fadeEngine, however, I can give you two pieces of advice:

You can use the jQuery effect stop() to stop all current jQuery animations on selected elements. For example:

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

Will stop the fading animation for that element in its current state. You can then reset the CSS if you wish.

To stop a function from being called that you previously queued with setTimeout, you must obtain the return value and call clearTimeout(). For example:

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

This will clear the pending timeout event and prevent it from occurring.

Adam Bellaire 2008-12-18 12:28:46

Answer 2

A:

hi, the fadeEngine works fine. with the fadeIn/Out the content (div id=fade1, id=fade2...) will be animated.

i cant use $("#fade"+y).stop(); to stop the animation. The firebug reporting: y is not defined

$(document).ready(function(){ $("#fade"+y).stop(); });

because ive the numbers only in the fadeEngine(x).

I dont know what must to do to stop the correct fade1 id. so i testing to stop it with the #container id but it also doesnt work. $("#container").stop();

help please

2008-12-18 12:58:56

Answer 3

A:

If it's simply a case of attaching the animation to the mouse over bevahiour etc try this :

$(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);
});

2008-12-18 13:03:30

Answer 4

+1 A:

Give all of your #fadeX elements a class (say .faders) and then use:

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

Or give the container div an id like #faderbox and say:

$('#faderbox div').stop();

geocar 2008-12-18 13:29:03

Answer 5

A:

im totaly desperate because it doesnt work... here the code again:

  <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
      return x;
          }

  fadeEngine(0); //Initialisation des Scripts

  </script>

$('.faders').mouseover(function(){ $('.faders').stop(); });

</head>
<body>

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

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

no idea what I still can do.......

2008-12-18 13:36:18

Answer 6

A:

Try applying the stop behaviour to each element that requires it e.g.

$('.faders').each(function () {
  $(this).mouseover(function () {
    $(this).stop(); 
  });
});

2008-12-18 14:59:39

Answer 7

A:

hi can you show me please the correct code? it doesnt work fine :(

im trying this here:

  <script type="text/javascript">

  function fadeEngine(x) {
    var total_divs=3; 
 var y=x;
  if(x==total_divs) {y=1;} 

  else {y++; }

  $("#fade"+x).css("display","none");
  $("#fade"+y).fadeIn("slow");
  setTimeout('fadeEngine('+y+')',3000); 

  $('.faders').each(function () {

    $(this).mouseover(function () {
      $(this).stop(); 
    });
  });

          }

  fadeEngine(0); 

  </script>

but im thinking i must make this here in the if statement: if(x==total_divs && !mouseover) {y=1;} else stop() the animation

but i dont know the soultion in JS with jQ

2008-12-18 15:14:34

ansaurus

tags:

views:

answers:

stop the animation jQ

related questions