CODEWITHSUNDEEP
javascriptjquery
user1713941
user1713941

Reputation: 150

jQuery : How to animate a span and show?

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

Upvotes: 1

Views: 1580

Answers (6)

AlexandruSerban
AlexandruSerban

Reputation: 312

I used the webkitEndAnimation event to remove the animated class and the end of the animation.

Here is the live example

Code:

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

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

If this works for you should think of a way to get the correct event name depending on the users browser

Upvotes: 0

user1713941
user1713941

Reputation: 150

I resolved it myself..

in beforeSend function i added this:

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

and then on success:

success:function(responseText)
{
if(responseText.mails=='yes')
 {
jQuery("#bubble_mate").text(responseText.totalmail);
jQuery("#bubble_mate").addClass('animating').show();
}
}

Upvotes: 0

MarcoK
MarcoK

Reputation: 6110

You'll need to remove the class once the animation is completed, and re-add it once you'll need to use it again.

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.

Upvotes: 1

Akhil Sekharan
Akhil Sekharan

Reputation: 12693

Try:

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

Upvotes: 0

Luca Davanzo
Luca Davanzo

Reputation: 21528

To show the slide down effect you have first to hide the div!

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

try on this fiddle http://jsfiddle.net/jQmJr/32/ ​

Upvotes: 0

jcolicchio
jcolicchio

Reputation: 808

If you are using keyframe animations, you may want to remove the class, then wait 1 ms and re-add the class. Adding the class multiple times will not animate it multiple times.

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

Will give the test element the class 'animated', which will start the animation, and every 3 seconds, it will remove the class, pause for 1 ms, then re-add it, which will restart the animation.

Source: http://jsfiddle.net/jcolicchio/eV7ET/

Upvotes: 0

Related Questions