jQuery : How to animate a span and show? - javascript

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

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.

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/

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/
​

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

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

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

Related

CSS3 animate slide left to right and right to left toggling

So basically I have a process with multiple steps that users will go through. Whenever they click a forward button, I want to slide the current step to the left and slide the next step on from right to left. When hitting backwards, I want the current step to slide off to the right and the previous step to slide in from the left. I have it working so it correctly does the slide on the first click both ways, the problem arrives when I basically try to toggle it (so clicking on forward, then back). When I do this, the thing will slide off correctly, but the previous step does not slide back on, leaving a blank content area. This is the state of the classes once you hit forward first, then hit back:
Here's my animation CSS:
#keyframes slide-in-from-left {
0% { tranform: translate(-100%); }
100% { transform: translateX(0%); }
}
#keyframes slide-out-left {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
#keyframes slide-in-from-right {
0% { transform: translateX(100%); }
100% { transform: translateX(0%); }
}
#keyframes slide-out-right {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
// Animation Classes
// ------------------------------
.slide-in-from-left {
animation: slide-in-from-left 0.5s forwards;
}
.slide-out-left {
animation: slide-out-left 0.5s forwards;
}
.slide-in-from-right {
animation: slide-in-from-right 0.5s forwards;
}
.slide-out-right {
animation: slide-out-right 0.5s forwards;
}
And then I just have:
[class^="step-"] {
position: absolute;
}
.step-4 {
transform: translateX(-100%);
}
And my jQuery/coffeescript:
goForwardAStep = () ->
step = $(this).data('step')
$('.signup .step-' + step).addClass('slide-out-left')
$('.signup .step-' + (step + 1)).addClass('slide-in-from-right')
goBackAStep = () ->
step = $(this).data('step')
$('.signup .step-' + step).addClass('slide-out-right')
$('.signup .step-' + (step - 1)).addClass('slide-in-from-left')
Should I be removing a class somewhere when the steps change? Should I have more classes involved to make sure things are laying off screen where they should?
A simpler approach. 3 clases for the state:
.current {
transform: {translateX(0%);}
}
.moved-left {
transform: {translateX(-100%);}
}
.moved-right {
transform: {translateX(100%);}
}
and a permanent one
.slide {
transition: transform 0.5s;
}

Click event lost after css animation

For a laugh I have put a Google-esk barrel roll on one of my sites.
All works fine on the first click of the selected element, but it won't fire again after that.
I have tried .click, .on('click', function() {}) and neither work.
Any ideas on how to fix and why this is happening?
Basic jsFiddle here
Source code example;
<html>
<head>
<title>
Roll Me
</title>
<style type="text/css">
</style>
<script>
$(function() {
$('#roll').on('click', function() {
$('body').css({
"-moz-animation-name": "roll",
"-moz-animation-duration": "4s",
"-moz-animation-iteration-count": "1",
"-webkit-animation-name": "roll",
"-webkit-animation-duration": "4s",
"-webkit-animation-iteration-count": "1"
});
});
});
</script>
</head>
<body>
<div id="roll">
<h1>click me</h1>
</div>
</body>
</html>
You need to remove the animation that you applied after it has finished and then re-add it on subsequent clicks.
var $body = $('body');
$('#roll').on('click', function() {
$body.addClass('barrel-roll');
});
$body.on('animationEnd webkitAnimationEnd mozAnimationEnd',function(e) {
$body.removeClass('barrel-roll');
});
#-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
#-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
#keyframes roll {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
.barrel-roll {
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count:1;
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="roll">
<h1>click me</h1>
</div>
That's because by that point the body element already has that CSS styling applied. The way to fix it is to remove the style properties from your body element:
setTimeout(function() {
$('body').removeAttr('style');
}, 4000);
I've used setTimeout here to ensure the style attribute gets reset only after your animation has completed (after 4 seconds).
JSFiddle demo.
It isn't the click handler isn't firing. You can verify that with console.log. You need to reset the animation.
After your animation completes, you have already set the animation! The only way to solve this is to remove it again, and then re-trigger it. The best way to do that, however, is CSS classes:
var busy = false;
$('#roll').on('click', function() {
if(busy) return;
else busy = true;
$('body').addClass("do-the-barrel-roll");
setTimeout(function(){
$('body').removeClass("do-the-barrel-roll");
busy = false;
}, 2100);
});
#-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
#-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
#keyframes roll {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
body.do-the-barrel-roll {
-webkit-animation: roll 2s;
-moz-animation: roll 2s;
animation: roll 2s;
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="roll">
<h1>click me</h1>
</div>
Simple add the class and remove it after the time it takes for the animation to complete. Also, I added a busy to prevent multiple clicks from making this hell.
What is happening is that the css is applied. Since it is already applied then when it is applied again on the next click nothing happens. I have created something that works, adding a class then removing after a timeout that matches the animation length. https://jsfiddle.net/5yqrxvkd/3/
$('#roll').on('click', roll);
function roll(){
$('body').addClass("animate");
setTimeout(function(){
$("body").removeClass("animate");
}, 4000);
}
There may be a better way using animate or something but I'm not that farmiliar with it.

Rotating image 2 times

There is several questions about how to rotate an image, but I want an animation-like rotating. By an
event (tap) I would like to rotate an image with -5 degree then with 5 degree, but if I write both rotating in
the same function (or eventhandler), the first rotate doesn't appear only the second is visible.
$("#imgdiv").on('taphold', function(e){
//$("#imageID").addClass("swing animated");
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(-5deg)"});
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(5deg)"});
//$("#imageID").removeClass("swing animated");
});
I have also tried a swing animation with classes (addClass, then removeClass), but with the same result:
#keyframes swing {
25% { transform: rotate(-5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
.swing {
transform-origin: top center;
animation-name: swing;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
}
You may put the second animation in a setTimeout in order to delay its animation until the first one finishes.
You can also put your transition in the css rather than in JS. Just place the transform value in JS.
Try something like this SAMPLE.
JS:
$(".clickme").click(function(){
//animate to -5deg
$(this).css('transform','rotate(-5deg)');
//animate to 5deg
setTimeout(function(){$(".clickme").css('transform','rotate(5deg)')},1000);
//animate back to root position
setTimeout(function(){$(".clickme").css('transform','rotate(0deg)')},2000);
});
you can do with addclass and removeclass, but there is one mistake in your code.
you are doing addclass and removeclass at the same time. so, animation is not happening or only one time happens
so try setTimeout:
$("#imgdiv").on('click', function(e){
$("#imageID").addClass("swing animated");
setTimeout(function(){
$("#imageID").removeClass("swing animated");
},1000)
});
i have done that in jsfiddle - http://jsfiddle.net/tqn394k9/

css, using rotate and jquery to initial position

I use a class, that make a picture rotate.
This class looks like that
.zodiac_rotate {
-webkit-animation:spin 15s linear infinite;
-moz-animation:spin 15s linear infinite;
animation:spin 15s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
I also tried to do that rotate using jquery but in css I've seen that it is more fluid so I decided to do it in css only.
Now, using jquery I would like to stop the rotate when the mouse is over the picture. I did a small javascript and it works fine :
$('#zodiac').hover(function(){
$(this).removeClass('zodiac_rotate');
},function(){
$(this).addClass('zodiac_rotate');
})
The trouble I have is with the position, I would like that when we mouse over the image, it stay at its position, when I remove the class, it goes like the original position, so the effect is not so fine.
Anykind of help will be much appreciated.
You could use animation-play-state for that
$('#zodiac').on('mouseover', function () {
$(this).css('-webkit-animation-play-state','paused');
$(this).css('animation-play-state','paused');
});
$('#zodiac').on('mouseout', function () {
$(this).css('-webkit-animation-play-state','running');
$(this).css('animation-play-state','running');
})
JSFiddle
Do rotate with jquery something like this:
$('#zodiac').hover(function(){
$(this).css('transform','rotate(0deg)');
});

CSS Animation when page is loading

I am using AJAX to load pages on my site.
Whilst a page is loading - I want the logo to spin in order to signify that it's loading.
The jQuery (Not sure if it's actually javascript, I'm new to java/jquery) being used to control the css when the page is loading is
function loadPage(url)
{
url=url.replace('#page','');
$('#logo').css('display','none;');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
$('#logo').css('visibility','visible');
}
}
The CSS controlling the animation is
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#logoholder {
}
#logo {
background: url(images/logo.png) 0 0 no-repeat;
width: 130px;
height: 130px;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms; /* 40 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms; /* 40 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms; /* 40 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* boooo opera */
-o-transition: rotate(3600deg); /* works */
}
Is there a property that I can add to the CSS (via jquery) so that the logo doesn't spin when the page isn't loading... At the moment the logo spins constantly
Maybe there is a property that I can take away from the "#logo" selector, which will invalidate the spin
and then I can add a certain property whilst the page is loading (through javascript) to make the spin work?
thanks
Instead of binding the CSS animation to #logo, bind it to a class - e.g. .spin. When Ajax is starting, add the spin class to #logo, using addClass:
$("#logo").addClass("spin");
When ajax content finished loading, use removeClass:
$("#logo").removeClass("spin");
This way you can easily show the logo normally, and make it spin only when ajax is acitve.
Use something like <body class="loading"> in your page.
Then on the bottom of the page, have $('body').removeClass('loading');
Then target your css animation with body.loading #logo selector.
Once the page is fully loaded, the jquery will remove the .loading class and the animation stops.
Also in your $.ajax you should add the .loading class at beforeSend and remove the class on complete event.
It looks like your hiding the logo initially, and showing after the content loads(as mentioned in the comments). Also, you are using the display property to hide it, and the visibility property to hide it. Those are not the same. I switched your functions below, and use the display property for both. Not sure if there are other errors, but give this a try, it should get you in the right direction.
function loadPage(url)
{
url=url.replace('#page','');
$('#logo').css('display','block');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
$('#logo').css('display', 'none');
}
}

Categories

Resources