How to run an animation with delay while another animation in progress - javascript

How can I fade out the div (or animate its opacity to 0) over 1000 milliseconds after 4000 milliseconds in the last 1000 milliseconds of the div's animation (while the div is still moving)?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function animateDiv(){
$("div").animate({left:"500px"},5000);
}
</script>
<style>
div {
background:red;
width:50px;
height:50px;
position:relative;
left:0;
}
</style>
</head>
<body onload="animateDiv();">
<div></div>
</body>
</html>

Note : queue:false is most important here.
Using queue:false you can run the animations simultaneously. Use delay() function for fadeOut() to wait. Which will give a smooth effect of the div slowly hiding when the left animation is coming to an end. Using progress we can identify the time left in the initial animation.
function animateDiv() {
$("div").animate({
left: "500px"
}, {
duration:5000,
queue:false
}).delay(3000).fadeOut(2000);
}
div {
background: red;
width: 50px;
height: 50px;
position: relative;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body onload="animateDiv();">
<div></div>
</body>
As an alternative( preferred solution ) like Rayon Dabre suggested, we can use the underlying functionalities of animate() function, we can use this to perfect it with out using delay and executing the second animation with the best time constraint as possible.
var flag = true;
function animateDiv() {
$("div").animate({
left: "200px"
}, {
queue: false,
duration: 5000,
step: function(now) { },
progress: function(animation, progress, remainingMs) {
if (remainingMs < 2000 && flag) {
flag = false;
$("div").fadeOut(1000);
}
}
});
}
div {
background: red;
width: 50px;
height: 50px;
position: relative;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body onload="animateDiv();">
<div></div>
</body>

Try something like this:
$("div").animate({left:"500px"},{duration:1000,start:function(){
$(this).animate({opacity:"0"},400);
}});
or:
$("div").animate({left:"500px"},{duration:10000, queue:false,start:function(){
$(this).delay(6000).animate({opacity:"0"},4000);
}});

Related

Hello I want to make 4 objects move left to right in a loop but my code is not working

This is the html code as you can see
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="clouds">
<img border="0" alt="animated clouds" src="clouds.png" >
<script>
$(document).ready(function() {
function loop() {
$('#clouds').css({right:0});
$('#clouds').animate ({
right: '+=1400',
}, 5000, 'linear', function() {
loop();
});
}
loop();
});
</script>
</div>
<div id="clouds2">
<img border="0" alt="animated clouds" src="clouds2.png" >
<script>
$(document).ready(function() {
function loop() {
$('#clouds').css({right:0});
$('#clouds').animate ({
right: '+=1400',
}, 5000, 'linear', function() {
loop();
});
}
loop();
});
</script>
</div>
</body>
</html>
#clouds {
position:absolute;
z-index:500;
right:0px;
top:10px;
}
#clouds2{
position:absolute;
z-index:500;
right:0px;
bottom:10px;
}
and this is css as you can see
I dont understand whu my second cloud wont move thats the thing thats bugging me
It would really mean a lot if someone helped me figure this out i am really lost...Also you could just tell me where i messed up you dont have to change the code if you feel like it,thank you
!!!
The first error was you gave $('#clouds') instead of $('#clouds2'), also the function works great, then eventhough the div adjusts fine, the image remained still, so I added a float:left to the img tag, which made the image move as expected!
$(document).ready(function() {
function loop() {
$('#clouds2').css('right', 0);
$('#clouds2').animate({
right: '+=1400',
}, 5000, 'linear', function() {
loop();
});
}
loop();
});
#clouds {
position: absolute;
z-index: 500;
right: 0px;
top: 10px;
}
#clouds2 {
position: absolute;
z-index: 500;
left: 0px;
bottom: 10px;
}
#clouds2>img {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clouds2">
<img border="0" alt="animated clouds" src="http://lorempixel.com/400/200/">
</div>
you have to specify the movement / animation of your clouds2 in the second part of the script tag. You are still using
$('#clouds')
instead of
$('#clouds2')

Making Infinite times animation in jquery

Guys i want to make infinite times animation in jquery.
I have tried with following code but that animation is occurring only 1 times but i want continues and also i want to change the images on every step.
$(document).ready(function(){
function animation(){
$("img").animate({
'top':'440px'
},'slow');
setTimeout(function(){
$("img").animate({
'top':'10px'
},'slow');
},3000);
}
animation();
});
</script>
You can do this by calling the last parameter in an .animate() function, as the name of the function that the animation is in.
See example below:
function animation() {
$('#element')
.animate({ //This moves the div down 90
marginTop: 90
}, 600)
.animate({ //This moves the div back to the top
marginTop: 0
}, 600, animation); //the 'animation' parameter calls this function from the start
}
animation();
#element {
width: 100px;
height: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="element"></div>
Let me know if you need any other help.
I would use CSS for this
.img {
animation: bounce 5s infinite;
position: absolute;
}
#keyframes bounce {
0% {
top: 10px;
}
50% {
top: 200px;
}
100% {
top: 10px;
}
}
<img class="img" src="http://placehold.it/100x100" />

Simple jQuery animation: position change not occuring as expected

I'm new to jQuery, and have written a very simple script using the .animate() function. Here's the complete HTML source code:
<!doctype html>
<html>
<head>
<title>Testing jQuery</title>
<style type="text/css">
div {
width: 400px;
height: 300px;
position: relative;
left: 10px;
margin: 10px 20px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").click(function() {
$(this).animate({opacity: 0.6, left: "+=40;"}, 2000);
});
});
</script>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
It appears that writing the .animate() function this way only animates the opacity of the clicked div and does not affect any change in its position. Interestingly, if I reverse the order of the arguments in the .animate() function, as so:
$("div").click(function() {
$(this).animate({left: "+=40",opacity: 0.6}, 2000);
});
There occurs both a change in position and a change in opacity. I followed the syntax from the .animate() jQuery API documentation, and there's a similar syntax used there:
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
});
});
I'm pretty sure the error is in my code itself, just can't put my finger on it yet.

Footer on hover and on scroll problems

I really cannot figure it out how can I accomplish this. I need to have a footer partially visible all the time at the bottom. When you hover it shows up entire height of 400px, then get back to the original position.
The problem that I have is with the scroll function. I do not know how to set it properly. The result I am looking for is when you scroll all the way down (without hovering) the footer needs to take the full height, if you scroll up the footer goes back to the original position.
Here is the jsFiddle (I hope it works, this is the first time when I use this).
Below is the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() > $('#move').position() -500) {
$('#footer').css('bottom', 0);
}
else {
$('#footer').css('bottom', -300);
}
});
$(document).ready(function () {
$('#footer').bind('mouseenter', function () {
$(this).stop().animate({ bottom: 0 }, 400); // on hover 0 400
}).bind('mouseleave', function () {
$(this).stop().animate({ bottom: -300 }, 400); // on out -300 400
});
});
</script>
<style>
html, body{
}
#footer {
position: fixed;
z-index: 999;
bottom: -300px;
width: 100%;
height: 400px;
background-color: #999;
opacity:0.5;
}
#content {
padding-bottom: 100px;
}
#move {
height:auto;
top: 5000px;
position: relative;
background-color:red;
}
</style>
</head>
<body>
<div id="content">
<h1 id="move"> end content </h1>
</div>
<div id="footer">
this is the footer
</div>
</body>
</html>
Updated fiddle: http://jsfiddle.net/moonspace/ZCger/1/
Add this JS into your '$(window).scroll(function () {}'
if( $(window).scrollTop() + $(window).height() == $(document).height() ) {
$('#footer').css('bottom', 0);
}

How do I move one <div> in front of another <div>, and back?

I have two divs. One is in the front, and I want the one from the back to move right, and then back on top of the first one. I used jQuery, but it changes z-index immediately, and then proceeds moving one div to the right and back to the left to it's original position. This is how I've tried to do it:
<!DOCTYPE html>
<html>
<head>
<style>
.block {
position: absolute;
background-color: #abc;
left: 0px;
top:30px;
width: 60px;
height: 60px;
margin: 5px;
}
.block1 {
position: absolute;
background-color: red;
left: 0px;
top:30px;
width: 60px;
height: 60px;
margin: 5px;
z-index: 999;
}
</style>
<script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="block" onmouseout="hide();"></div>
<div class="block1" onmouseover="show();"></div>
<script>
function show() {
$(".block").animate({left: '+=100px'}, 2000);
$(".block1").css('zIndex', '-10000');
$(".block").animate({left: '-=100px'}, 2000);
};
function hide() {
$(".block").animate({left: '+=100px'}, 2000);
$(".block1").css('zIndex', '10000');
$(".block").animate({left: '-=100px'}, 2000);
};
</script>
</body>
</html>
The animate method is asynchronous. You have to change the z-index after you have finished the first animation by providing a callback function to the animate method:
function show() {
$(".block").animate({left: '+=100px'}, 2000, function() {
$(".block1").css('zIndex', '-10000');
$(".block").animate({left: '-=100px'}, 2000);
});
};
From the documentation for .animate():
.animate( properties [, duration ] [, easing ] [, complete ] )
complete
Type: Function()
A function to call once the animation is complete.
function show() {
$(".block").animate({left: '+=100px'}, 2000, function() {
$(".block1").css('zIndex', '-10000');
$(".block").animate({left: '-=100px'}, 2000);
});
};
function hide() {
$(".block").animate({left: '+=100px'}, 2000, function() {
$(".block1").css('zIndex', '10000');
$(".block").animate({left: '-=100px'}, 2000);
});
};
You have to fire remaining operations after the first animation is complete via a callback function.
Raidri beat me to it !
Well you can use setimeout().
first you animate it to the left. Then after the setTimeout you can change the z-index and move it to the right!
here are some examples of setTimeout:
http://www.jquery4u.com/jquery-functions/settimeout-example/

Categories