3

フェードイン/フェードアウトをループしました。
ホバーすると、フェードイン->停止効果が得られ、マウスアウトでアニメーションが再開されます。
それを理解することはできません:(

html:

<style>
div{
width:300px;
height:300px;
background-color:black;  
}​
</style>

<div>
</div>

jsコードは次のとおりです。

function fade(){
$('div').fadeIn(2000, function(){
   $('div').fadeOut(2000, fade());                           
    })
}

fade();

$('div').hover(function(){
    $('div').fadeIn({duration:100, queue:false}).stop(true, true);
},function(){
    fade();
});​

ここに JsFiddle リンクがあります:
http://jsfiddle.net/5Zqcu/55/

ご協力ありがとうございました

4

4 に答える 4

2

フィドルを修正しました

function fade(){
    $('div').fadeIn(2000, function(){
       $('div').fadeOut(2000, fade);                           
    })
}

fade();

$('div').hover(function(){
    $('div').stop(true);
},function(){
    fade();
});​
于 2012-10-14T09:20:55.603 に答える
1

ある種のパルス要素が必要なようです。マウスオーバーするまでフェードインおよびフェードアウトし、完全に不透明になる必要があります。fadeToasfadeInを使用することをおfadeOut勧めします。多くの場合、最初の不透明度を表示された不透明度として使用します。

また、コールバックを使用して次のアニメーションを並べる必要はありません。アニメーションは自動的にキューに入れられるため、それらをつなぎ合わせることができfxます。アニメーションを停止したい場合はstop(true)、 を使用する必要があります。使用stop()すると、現在のアニメーションは停止しますが、次のアニメーションが開始されます。

function fade() {
    $("div").fadeTo(2000, 0).fadeTo(2000, 1, fade);
}

fade(); // Start throbbing

$("div").hover(function() {
    // You want to clear the queue but not call the complete callback
    // and then rapidly fade in
    $(this).stop(true).fadeTo(100, 1);
}, fade);

ここに更新されたフィドルがありますhttp://jsfiddle.net/5Zqcu/66/

于 2012-10-14T10:23:05.053 に答える
1

アニメーション/フェードインを行う前に停止する必要があります:

function fade(){
    $('div').fadeIn(2000, function(){ 
       $('div').fadeOut(2000, fade);                           
    })
}
fade();

$('div').hover(function(){
    $(this).stop().animate({opacity:1},100);
},function(){
    fade(); 
});​
于 2012-10-14T09:20:12.817 に答える
0

超短いのと同じこと：

$('div').on('mouseenter').stop(true).fadeTo(100,1)
   ._.on('mouseleave').repeat().fadeTo(2000,0).fadeTo(2000,1,$)
   ._.mouseleave();

この例、http://jsfiddle.net/creativecouple/rLcqD/では、短い構文に小さなプラグイン jquery-timingを使用しています。

于 2012-10-14T20:42:03.440 に答える