Question

我有一个每10秒检查一次邮件的功能，如果有新邮件，它会发出气泡通知并显示邮件总数。

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

它首次加载页面时会动画气泡，但此功能是在interwal上设置的，因此每次有新邮件时它都应该为气泡设置动画，但它不会

我的动画和其他功能都很完美..它就是它在设置间隔中调用它时没有动画。它广告邮件总数..但没有动画。

请帮帮我。此致

加

这是动画类和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);
            }
        }

Answer 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

Answer 2

尝试：

jQuery("#bubble_mate").hide().show('normal');

Answer 3

如果您使用的是关键帧动画，则可能需要删除该类，然后等待1 ms并重新添加该类。多次添加类不会多次动画。

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

将为测试元素提供“动画”类，它将启动动画，每隔3秒，它将删除该类，暂停1毫秒，然后重新添加它，这将重新启动动画。

来源：http://jsfiddle.net/jcolicchio/eV7ET/

Answer 4

要显示下滑效果，您首先要隐藏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/

Answer 5

我自己解决了..

在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();
}
}

Answer 6

我使用webkitEndAnimation事件删除动画类和动画结束。

这是实时example

代码：

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

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

如果这适用于您，您应该考虑根据用户浏览器获取正确事件名称的方法

jQuery：如何为跨度和节目制作动画？

6 个答案: