0

マウスがjqueryに入るときに、フェードインとフェードアウトのアニメーションを停止するにはどうすればよいですか？私はこのようなコードを持っています

function fadeItIn() {
    $('.banner_outer1').fadeIn(time, function () {
       $('.banner_outer1').mouseenter(function(){
           //stop animation
           });
       $('.banner_outer1').mouseout(function(){
           //start animation
           });     
        setTimeout(fadeItOut, 1400);
       //fadeItOut();
    });
}

function fadeItOut() {
    $('.banner_outer1').fadeOut(time, function () {
        $('.banner_outer1').html(banner_outer2);
        banner_outer3 = banner_outer2;
        banner_outer2 = banner_outer1;
        banner_outer1 = banner_outer3;
        fadeItIn();
    });
}

マウスがdivに入るときにアニメーションを停止し、マウスがdivを離れるときにアニメーションを再開したい。jqueryでどのように行うことができますか？

4

3 に答える 3

1 
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        function bind()
        {
            $('.fader').bind('fade-cycle', function() {
                $(this).fadeOut('fast', function() {
                    $(this).fadeIn('fast', function() {
                        $(this).trigger('fade-cycle');
                    });
                });
            });
        }
        bind(); // binding fade-cycle trigger to .fader
        $('.fader').trigger('fade-cycle'); // starting animation by triggering fade-cycle event

        $('.fader').mouseover(function(){
            $('.fader').unbind('fade-cycle'); // stopping animation by unbinding the fade-cyle
        });
        $('.fader').mouseout(function(){
            // restart animation by rebinding and triggering the fade-cycle event
            bind();
            $(this).trigger('fade-cycle');
        });
    });
</script>

<div class="fader">
    paste your content here that you want to animate (fadein & fadeout continuously)
</div>
于 2012-11-23T06:46:46.380 に答える
0 
$('.banner_outer1').hover(
  handlerIn,
  handlerOut
);

function handlerIn(){
    // do some stuff here on mouseenter
}

function handlerOut(){
    // do some stuff here on mouseout
}

http://api.jquery.com/hover/

于 2012-11-23T06:27:26.513 に答える
0

マウスオーバーイベントでブール変数を設定して、アニメーションを停止することができます。

var shouldAnimate;

$('.banner_outer1').mouseOver(function(){
  shouldAnimate = false;
});

$('.banner_outer1').mouseLeave(function(){
  shouldAnimate = true;
});

function fadeItIn() {
  if (shouldAnimate){
    $('.banner_outer1').fadeIn(time, function () {
       $('.banner_outer1').mouseenter(function(){
           });
       $('.banner_outer1').mouseout(function(){
           });     
    });
   }
    setTimeout(fadeItOut, 1400);
}

function fadeItOut() {
   if (shouldAnimate){
    $('.banner_outer1').fadeOut(time, function () {
        $('.banner_outer1').html(banner_outer2);
        banner_outer3 = banner_outer2;
        banner_outer2 = banner_outer1;
        banner_outer1 = banner_outer3;
        fadeItIn();
    });
  }
}
于 2012-11-23T06:30:07.543 に答える