6

条件が私の場合、背景色が脈動する効果を達成しようとしています。ので、私は持っています：

<div class="box">...</div>

.box {
    background-color: #fff;
    transition: background-color 0.5s ease-out;
}
.box.active {
    background-color: #ccc;
}

そのため、jQuery を使用してそのクラスを数回追加および削除し、背景色の脈動効果を作成したいと考えています。何かのようなもの：

$('.box').addClass('active').delay(1000).removeClass('active').delay(1000).addClass('active');

これは、理論的には脈動効果を生み出すはずですが、そうではありません。「アクティブな」クラスが追加され、削除または追加されることはありません。最初の「removeClass」がトリガーされないようです。

私は何かが欠けていますが、何がわかりません。CSS遷移のタイミングと関係があるのか​​もしれませんが、それぞれ独立しているはずですよね？

アイデアをありがとう。

4

5 に答える 5

16

遅延は、クラスの追加と削除ではなく、アニメーションでのみ機能します。また、CSS でキーフレームを使用して脈動させることもできます。

@keyframes pulse { 
  50% { background-color: #ccc }
}

.box {
  animation: pulse .5s ease-out 2;
}
于 2013-02-11T16:25:05.640 に答える
4

CSS3 アニメーションでこの効果を実現してみてください。

@-webkit-keyframes pulsate
{
      0%   {background-color: #fff;}
      50%  {background: #ccc;}
      100% {background: #fff;}
}

次に、キーフレームをbox要素に適用します

.box{
  animation: pulsate 2s infinite;
}

http://jsfiddle.net/taltmann/jaQmz/

于 2013-02-11T16:25:40.257 に答える
1

このdelay関数は、実際にはアニメーションにのみ使用されます。クラスの追加と削除はアニメーションではありませんが、queueメソッドまたはsetTimeout関数を使用して目的を達成できます。

この質問には、別のスレッドで多くの良い回答があり、興味深い読み物になる可能性があります。

于 2013-02-11T16:25:45.450 に答える
0

x 秒ごとに自分自身を呼び出して css プロパティを変更する関数です。 live demo を参照してください。

var state = true;
function changeColor() {
    state = !state;
    if(state){
        $("div").css("background","red");
    }else{
        $("div").css("background","blue");
    }
    setTimeout(function () {
        changeColor();
    }, 1000);
}

changeColor();
于 2013-02-11T16:24:56.290 に答える