Jquery Opacityフェードインアウトループ

Question

私のクライアントの一人がdivに点滅するように頼まれました。私はそれが彼にとって最高のものではないかもしれないと思っています。おそらく、不透明度の出入りが軽くなると顧客を悩ますことなく、顧客の注目を集めるでしょう。

私は現在

<a class="special_button" href="#">Special Offers &rsaquo;</a> 

を持っている私は、ブラウザの負荷にフェードインを起こし、別のdiv、次のコードを持っている：

$('.logo-top').delay(700).animate({ 
    'opacity' : '1',   
    'top' : '+=40px' 
}, { duration: 700, easing: 'swing' }); 

は私がspecial_buttonのための似たような方法を行うだろうが、代わりに不透明度をループしますか？ 80から100までそれは多分5

ベストのように、時間の一定量をループしている場合それも良いだろう

、 ステパン

Answer 1

は、おそらくこのjsFiddleのようなものを持っていると思います。

また、カウンタを保持するだけで、この回数を点滅させることもできます。 jsFiddleから

コード：

$(document).ready(function() { 
    function runIt() {   
     var baloon = $('#baloon'); 
     baloon.animate({opacity:'1'}, 1000); 
     baloon.animate({opacity:'0.5'}, 1000, runIt); 
    } 
    runIt(); 
}); 

Answer 2

あなたはこのようにそれを行うことができます。

(function() { 
    var cnt = 0; 
    var specials = $(".special_button"); 

    function next() { 
     if (cnt < 5) { 
      specials.fadeTo(2000, .1).fadeTo(2000, 1, next); 
      ++cnt; 
     }      
    } 

    next(); 
})(); 
​ 

の作業のデモ：http://jsfiddle.net/jfriend00/558GY/

FYI、80％と100％の不透明度との差はかなり微妙です。私はデモでその違いをもっと大きくしました。あなたは明らかにあなたが望むどんな効果にでも調整することができます。

Answer 3

限り私はあなたがここに点滅する何かをしたい理解してその：が

$("document").ready(function() { 
    anm(".special_button"); 
}); 
function anm(element) { 
    $(element).delay(200).animate({ opacity: 'toggle' }, 1000, function() { anm(element); }); 
} 

デモ：CSS3のキーフレームを使用しないのはなぜhttp://jsfiddle.net/BerkerYuceer/GdcRs/

Answer 4

？

.twinkle { 
 
    background: red; 
 
    padding: 0.2em; 
 
    margin: 50px; 
 
} 
 

 
@-webkit-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@-moz-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@-ms-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
.twinkle { 
 
    -webkit-animation: twinkly 1s alternate infinite; 
 
    -moz-animation: twinkly 1s alternate infinite; 
 
    -ms-animation: twinkly 1s alternate infinite; 
 
    animation: twinkly 1s alternate infinite; 
 
}

<span class="twinkle">Special Offers &rsaquo;</span>

その後、古いブラウザ用のフォールバックを使用することができます。他のスクリプトのスクリプトはいいですが、私はUlanの解決策に助言します。

Answer 5

短いコードが好きな場合は、plugin jquery-timingをjQueryのタイミング用に使用します。 それはにあなたの完全なコードを縮小：

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$); 

ああ、あなたはそれが特定の回数（例えば20）を切り替えたいとき、あなたは

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$).until(20); 

クール、えっを書くのか？