Jquery/Javascript animate issue - javascript

Hi I'm having a div which width is increased with jquery. I want when that width reaches 100% to do something
$(function() {
$('.play').click(function() {
$('.loader').animate({
width: "100%"
},1500);
$('.video img').attr('src','css/images/movie-click.jpg')
$(this).hide();
if($('.loader').width()==$('.video img').width()) {
$('.video img').attr('src','css/images/movie.jpg')
}
});
Something is not right in the if statement. if someone can help me. My idea is to check if the with is 100%, and if it is, everything to be back to normal.(play to be showen, width=0%, img attr different.)

Use the complete callback in animate to execute code once the animation is finished:
$('.play').click(function () {
$('.loader').animate({
width: "100%"
}, 1500, function() {
// any code here will run only after the animation is complete
$('.video img').attr('src', 'css/images/movie.jpg');
});
// any code here will run as soon as the animation starts,
// before it's completed
});

The code in the click function is only called once, so your if statement is not being ran continuously as it animates. Instead, simply add that logic to a callback after the .animate() is complete:
$('.loader').animate({
width: "100%"
},1500,swing, function() {
$('.video img').attr('src','css/images/movie.jpg');
});

Something is not right in the if statement
Indeed :-) Your current code just compares the css values returned by the two .width() calls - which will be false of course.
That's not how you wait for an animation. The animation code is asynchronous, your animate() call just starts the animation but returns immediately (and goes on hiding the button and evaluating the condition).
Instead, pass a callback function to animate, it will be executed when the animation has completed:
$(function() {
$('.play').click(function() {
$(this).hide();
var $img = $('.video img');
$img.attr('src','css/images/movie-click.jpg');
$('.loader').animate({
width: "100%"
}, 1500, function() {
// executed after the animation
$img.attr('src','css/images/movie.jpg');
});
});
});

Related

Multi-element jQuery animation issue

I am trying to loop through an animation selecting multiple elements and moving them as long as the mouse hovers over the parent area. This works well enough, but each time the animation loops through the first element (child) moves faster than the others. ??? JSFiddle Example
HTML:
<div id="menuContent">
<button id="btn1" class="mainButton" left="0"/>
<button id="btn2" class="mainButton" left="0"/>
<button id="btn3" class="mainButton" left="0"/>
</div>
jQuery:
$("#menuContent").hover(function () {
loop();
}
, function () {
stop();
}
);
function stop() {
$(".mainButton").stop();
}
function loop() {
$(".mainButton").stop().animate({ left: "+=20"}, 100, 'linear', function () { loop(); });
}
From the documentation:
complete
A function to call once the animation is complete, called once per matched element.
When you call animate it starts 3 animations. Animation for the first element gets started and finished first. And then its complete gets called and you stop and start all animations, though some of them didn't get completed yet.
Consider this example (Fiddle):
function loop() {
$('.mainButton').stop().animate({
left: '+=1'
}, 1, 'linear', function() {
loop();
});
}
Only one circle will be moving because there is no time gap for others to move.
You can use promises to make it work (Fiddle):
$('#menuContent').hover(function() {
$('.mainButton').data('run', true);
loop();
}, function() {
$('.mainButton').data('run', false);
});
function loop() {
if (!$('.mainButton').data('run')) return;
$('.mainButton').animate({left: '+=10'}, 100, 'linear').promise().done(loop);
}
Danil Speransky is correct. However there is an options argument to the animate function to allow animations to not run in a rigid queue.
`$(".mainButton").animate({ left: "+=20"},{queue: false}, 100, 'linear', function () { loop();});`
Check out the documentation for queue:false here.
You're mileage may vary, but doing these two things seem to help a lot:
First, store the jQuery object for the .mainButton elements:
var $mainButton = $('.mainButton')
Second, Make the left increment more and also increase the delay:
$mainButton.stop().animate(
{ left: "+=1000"},
5000,
'linear',
function() { loop() })
You can toy with the numbers more to see if you get even better performance.
https://jsfiddle.net/wotfLyuo/8/
Your complete handler is called, if the animation for one elements in the jquery collection is finished. So when the first element is finished, you call loop and stop the animation of the other elements. Better use promise and done and save the state of your animation within the collection:
$("#menuContent").hover(function () {
start();
}, function () {
stop();
});
function start() {
$(".mainButton").data('stopped', false);
loop();
}
function stop() {
$(".mainButton").data('stopped', true).stop();
}
function loop() {
var $mainButtons = $(".mainButton").stop();
if(!$mainButtons.data('stopped'))
$mainButtons.animate({ left: "+=20"}, 100, 'linear').promise().done(loop);
}
Here is a working fiddle (https://jsfiddle.net/wotfLyuo/5/)

animate() not working with dynamic css() properties

I was working on making my animations work dynamically for various elements when I ran into this problem (right when I was about to finish too). I can't animate properties using the JQuery css() method. I was able to get the animation working with hard coded values for the height, width, and top properties. Here's the snippet:
function shrinkSection(section){
var elem = section.SectionID;
$(elem).find(".content").fadeOut(500);
$(elem)
.animate({top: $(elem).css('top'), height: $(elem).css('height')}, 500)
.animate({width: $(elem).css('width')}, {duration: 500,
complete: function() {
$(elem).find(".icon").fadeIn(500);
$(elem).addClass("active");
}
});
}
console.log() reveals that $(elem).css('[PROPERTY]') IS returning the correct css value. Any ideas why this won't work?
The animate() method queues the effects and waits till the first effect animation is finished to start the second one, so they are serially applied. From jquery docs:
queue (default: true)
Type: Boolean or String
A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it.
If you want the animations to happen in "parallel", you can do:
$(elem).find(".content").fadeOut(500);
if( $(elem).length )
$(elem)
.animate( { top: $(elem).css('top'), height: $(elem).css('height')},
{ duration: 500,
queue: false,
complete: function() { alert('callback!!'); } }
)
.animate( { width: $(elem).css('width')},
{ duration: 500,
queue: false,
complete: function() {
$(elem).find(".icon").fadeIn(500);
$(elem).addClass("active");
}
});
else
alert("No elem found!!");
Notice in the example, that you could check that the element elem on which you apply the effect is actually found by jquery.
This way you track possible DOM selector problems also.

wrap set time out function around simple slide animation jquery

I have a simple slide down function using jQuery where I'm simply animating an image to slide down. It works great. However I'm trying to reset the animation after it's ran, so it will continue on loop during the duration of the users session. I tried the below, but it didn't work as wanted, slide animation still ran, but not the sought effect of timing out and restarting. Thanks for any thoughts.
$(window).load(function () {
setTimeout(function(){
$("#man").show("slide", {
direction: "up"
}, 2000);
},500);
});
You can call a function after it completes the 2000ms transition.
Updated fiddle: http://jsfiddle.net/CqR9E/392/
$(window).load(function () {
setTimeout( go(),500);
});
function go(){
$("#man").show("slide", {
direction: "up"
}, 2000, function(){
$( "#man:visible" ).removeAttr( "style" ).fadeOut();
go();
});
}

Automatically move div with javascript on delay

I have the below piece of code that moves a onto the screen when ?added is in the URL which works great. I now need to add a piece of code to it that then moves the back over after 5 seconds. I have noticed there's a delay function but I'm not sure how to add it into the code. Can anyone help? Many thanks!
$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
$('#popout-left-menu-container')
.animate({
'right': '2px'
}, 300);
};
});
You can use the setTimeout function to delay something in javascript. Maybe like this:
$('#popout-left-menu-container').animate({'right':'2px'},300);
setTimeout(function(){
//This is animation that runs after 5 seconds. You can use it to move the block back.
//You have to set your parameters yourself here
$('#popout-left-menu-container').animate({'right':'0px'},300);
}, 5000);
$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
setTimeout(function(){
$('#popout-left-menu-container')
.animate({
right:'2px'
},300);
},5000);
};
});
You should do it with .delay().
$("query").animate(firstAnimation, firstDuration).delay(milliseconds).animate(secondAnimation, secondDuration);

setInterval to loop animation not working

I have a simple fadeIn fadeOut animation, it's basically a blinking arrow. However, it doesn't loop. It just goes once, and it's done. I found an answer here -> How to repeat (loop) Jquery fadein - fadeout - fadein, yet when I try to follow it, mine doesn't work.The script for the animation is
<script type="text/javascript">
$(document).ready(function() {
$('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
$('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
});
</script>
the script given in the answer is
$(function () {
setInterval(function () {
$('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
}, 5000);
});
so I assume the end combination would be
$(document).ready(function() {
setInterval(function () {
$('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
$('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
}, 5000);
});
</script>
Could someone please point out what I'm doing wrong? thanks
Two details :
You have to set the interval to 10000 because your animation run 10s
If you want it to start now, you have to call it one time before executing the interval (the first execution of the interval is after the delay)
--
$(document).ready(function() {
function animate() {
$('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
$('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
}
animate();
setInterval(animate, 10000);
});​
Demonstration here : http://jsfiddle.net/bjhG7/1/
--
Alternative code using callback instead of setInterval (see comments):
$(document).ready(function() {
function animate() {
$('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
$('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000, animate);
}
animate();
});​
Demonstration here : http://jsfiddle.net/bjhG7/3/
function fadein(){
$('#picOne,#picTwo').animate({'opacity':'1'},1000,fadeout())
}
function fadeout(){
$('#picOne,#picTwo').animate({'opacity':'0'},1000,fadein())
}
fadein()
Take advantage of the callback argument of .fadeOut(). Pass a reference to the function that does the fading as the callback parameter. Choose which image to fade based on a counter:
$(function() {
var imgs = $('#picOne,#picTwo');
var fadeCounter = 0;
(function fadeImg() {
imgs.eq(fadeCounter++ % 2).fadeIn(1000).delay(3000).fadeOut(1000, fadeImg);
})();
});
Demo: http://jsfiddle.net/KFe5h/1
As animation sequences get more complex, I've found using async.js leads to more readable and maintainable code. Use the async.series call.

Categories