1

I have a function that checks mail on every 10 secods, if there is a new email, it make a bubble notification and show the total number of mail.

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

It animates the bubble, first time I load the page, but this function is set on an interwal, so it should animate the bubble each time there is new mail, but it Doesn't

My animation and other functions are perfect.. it is just it Doesn't animate when it is being called in set interval. it ads the number of total mail.. but no animation.

Please help me. Regards

Added

This is animating class and 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

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

我自己解决了。。

在 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

我使用了 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 回答