10

クライアントの 1 人から、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 回ループするとさらに良いでしょう。

ベスト、ステパン

4

5 に答える 5

14

おそらく、このjsFiddleのようなものが必要です。

また、カウンターを保持するだけで、これを点滅させる回数を指定することもできます。

jsFiddle からのコード:

$(document).ready(function() {
     function runIt() {           
       var baloon = $('#baloon');
       baloon.animate({opacity:'1'}, 1000);
       baloon.animate({opacity:'0.5'}, 1000, runIt);
    }
    runIt();
});
于 2012-10-05T06:05:25.187 に答える
12

CSS3 キーフレームを使用しないのはなぜですか?

.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 のソリューションをお勧めします。

于 2012-10-05T07:00:06.103 に答える
4

このようにできます。

(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/

参考までに、80% と 100% の不透明度の違いはかなり微妙です。私はデモで違いをはるかに大きくしました。もちろん、必要なエフェクトに合わせて調整できます。

于 2012-10-05T06:34:33.413 に答える
1

私が理解している限り、あなたはここで何かを点滅させたいと思っています：

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

デモ： http： //jsfiddle.net/BerkerYuceer/GdcRs/

于 2012-10-05T06:54:29.590 に答える
1

短いコードが好きなら、プラグイン jquery-timingを使用して、jQuery でタイミングを計ります。完全なコードを次のように縮小します。

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

ああ、特定の回数 (たとえば 20 回) 切り替えたい場合は、次のように記述します。

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

かっこいいね？

于 2012-10-05T14:25:38.030 に答える