1

10秒ごとにメールをチェックする機能があり、新しいメールがある場合はバブル通知を行い、メールの総数を表示します。

jQuery("#bubble_mate").text(responseText.totalmail);
jQuery("#bubble_mate").addClass('animating').show();

初めてページをロードしたときにバブルをアニメーション化しますが、この機能はインターウォールに設定されているため、新しいメールがあるたびにバブルをアニメーション化する必要がありますが、そうではありません

私のアニメーションと他の機能は完璧です..設定された間隔で呼び出されたときにアニメーション化されないだけです。総メール数を広告しますが、アニメーションはありません。

私を助けてください。よろしく

追加した

これはクラスとcssをアニメーション化しています

.animating{
            -webkit-animation: animate 1s cubic-bezier(0,1,1,0);
            -moz-animation: animate 1s cubic-bezier(0,1,1,0);
            -ms-animation: animate 1s cubic-bezier(0,1,1,0);
            -o-animation: animate 1s cubic-bezier(0,1,1,0);
            animation: animate 1s cubic-bezier(0,1,1,0);            
}

        @-webkit-keyframes animate{
            from {
                -webkit-transform: scale(1);
            }
            to {
               -webkit-transform: scale(1.7);
            }
        }

        @-moz-keyframes animate{
            from {
                -moz-transform: scale(1);
            }
            to {
               -moz-transform: scale(1.7);
            }
        }

        @-ms-keyframes animate{
            from {
                -ms-transform: scale(1);
            }
            to {
               -ms-transform: scale(1.7);
            }
        }

        @-o-keyframes animate{
            from {
                -o-transform: scale(1);
            }
            to {
               -o-transform: scale(1.7);
            }
        }

        @keyframes animate{
            from {
                transform: scale(1);
            }
            to {
               transform: scale(1.7);
            }
        }
4

6 に答える 6

1

アニメーションが完了したらクラスを削除し、再度使用する必要が生じたら再度追加する必要があります。

setInterval(function() {
    $("#bubble_mate").addClass('animating');

        setTimeout(function() {
            $("#bubble_mate").removeClass('animating');        
        }, 1000); // This is the time specified in your CSS

}, 3000); // Example interval time

JSFiddle .

于 2012-11-27T09:41:19.063 に答える
0

私はそれを自分で解決しました..

beforeSend 関数でこれを追加しました：

beforeSend:function (){
jQuery("#bubble_mate").removeClass('animating');
},

そして成功した場合：

success:function(responseText)
{
if(responseText.mails=='yes')
 {
jQuery("#bubble_mate").text(responseText.totalmail);
jQuery("#bubble_mate").addClass('animating').show();
}
}
于 2012-11-27T09:45:58.417 に答える
0

試す：

jQuery("#bubble_mate").hide().show('normal');
于 2012-11-27T08:15:31.580 に答える
0

キーフレーム アニメーションを使用している場合は、クラスを削除し、1 ミリ秒待ってからクラスを再度追加することをお勧めします。クラスを複数回追加しても、複数回アニメーション化されることはありません。

$('#test').addClass('animated');
setInterval(function(){
    $('#test').removeClass('animated');
    setTimeout(function(){
        $('#test').addClass('animated')
    }, 1);
}, 3000);

テスト要素に「animated」クラスを指定すると、アニメーションが開始され、3 秒ごとにクラスが削除され、1 ミリ秒一時停止してから再度追加され、アニメーションが再開されます。

ソース: http://jsfiddle.net/jcolicchio/eV7ET/

于 2012-11-27T08:17:30.530 に答える
0

webkitEndAnimation イベントを使用して、アニメーション化されたクラスとアニメーションの終わりを削除しました。

これがライブの例です

コード：

$(document).ready(function(){
    setInterval(function(){
        $('#test').show().addClass('animated');
    }, 3000);

    $('#test').on('webkitAnimationEnd', function () { 
    $(this).removeClass('animated').hide();
    });  
});​

これが機能する場合は、ユーザーのブラウザに応じて正しいイベント名を取得する方法を考える必要があります

于 2012-11-27T10:05:08.577 に答える
0

スライド ダウン効果を表示するには、まず div を非表示にする必要があります。

$("#simulate").on("click", function() { 
  console.log("mail in");
  $("#bubble_mate").text("10 new mail");
  $("#bubble_mate").addClass('animating').hide();
  $("#bubble_mate").slideDown(500);
});

このフィドルを試してみてください http://jsfiddle.net/jQmJr/32/ </p>

于 2012-11-27T08:27:07.647 に答える