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" />
Related
function slideRight() {
// slide to right
$("div").animate({
left: "200px"
}, 2000, function() {
slideLeft();
});
}
function slideLeft() {
// slide to left
$("div").animate({
left: "0px"
}, 2000, function() {
slideRight();
});
}
$(document).ready(function() {
$("#start").on("click", function() {
slideRight();
});
});
I have TWO divs and I want to move them back and forth at the same time.
<div style="top:100px;"></div>
<div style="top:300px;"></div>
the css code:
div {
background: yellow;
height: 100px;
position: absolute;
width: 100px;
left:0px;}
However, the animation get stuck and become much slower after each slide. One div is OK. The more divs, the longer the time get stuck. Why?
Try adding something like :
$("div").stop().dequeue().animate({
...
I think the problem is, your functions call themselves inside another animate function with a never ending cycle which causes delay on each call. Instead I'm stopping the cycle on second function and start again with timeout which breaks the loops and delay too and start again. DEMO
$(document).ready(function() {
slideRight();
});
function slideRight() {
// slide to right
$("div").animate({
'left': "200px"
}, 1000, slideLeft);
}
function slideLeft() {
// slide to right
$("div").animate({
'left': "0px"
}, 1000);
setTimeout(slideRight, 1000);
}
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#second {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div><div id="second"></div>
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);
}});
I'm trying to make a simple two image slider that auto slides up and down. When the user hovers into it it should stop and if he/she hovers out of it, it continues to function normally. I tried using set and clearInterval but the slider doesn't pause on hover. How should I write the code to make it work?
var $Slides = $("#EServices"); //Or var $Slides = $("#Serv-Slides");
var interval;
function StartSlider() {
interval = setInterval(function () {
$("#Serv-Slides").animate({ "marginTop": "0px" }, 200).delay(2000);
$("#Serv-Slides").animate({ "marginTop": "-150px" }, 200).delay(2000);
});
}
function StopSlider() {
clearInterval(interval);
}
$Slides.on('mouseenter', StopSlider).on('mouseleave', StartSlider);
StartSlider();
There is two main problems here:
clearInterval does not stop jquery's animation, it will just stop your setInterval calls so that no further animation are added in the queue. Every animations that you already piped and that are still pending will still be run. It will stop when all of them are finished.
You did not provided any given time for your setInterval. As a result, the provided function will be repeatedly called as fast as your browser can. This is a terrible mistake because you will end up with a massive amount of pending animations in the queue. You are piping new animations much much faster than they are actually consumed.
This should work:
var interval;
function startSlider() {
function animate(){
$("#Serv-Slides").animate({ "marginTop": "0px" }, 200).delay(2000)
.animate({ "marginTop": "-150px" }, 200); //.delay(2000);
// Last delay is useless, it is managed by the setInterval.
}
// Start the first animation right now.
animate();
// Set an interval that matches the animations and the delays duration.
interval = setInterval(animate, 200 + 2000 + 200 + 2000);
}
function stopSlider() {
// Avoid any further animation to be added.
clearInterval(interval);
// Stop the currently running animations.
$("#Serv-Slides").stop(true);
}
$("#Slides").on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
#Slides{
background-color:yellow;
padding-top: 150px;
height: 20px;
}
#Serv-Slides{
background-color: red;
height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Slides">
<div id="Serv-Slides"></div>
</div>
You may also consider using css animations with #keyframes instead. Using the :hover pseudo-class you don't even need any JavaScript. This is likely to be more performant and I personally find it more elegant, easier and more flexible. Here is an example (you may need to add css prefixes for older browsers' support):
#Slides{
background-color:yellow;
padding-top: 150px;
height: 20px;
}
#Serv-Slides{
background-color: red;
height: 20px;
animation-duration: 4s;
animation-name: up-and-down;
animation-iteration-count: infinite;
}
#Slides:hover #Serv-Slides{
animation-play-state: paused;
}
#keyframes up-and-down {
0% { margin-top: 0px; }
45% { margin-top: 0px; }
50% { margin-top: -150px; }
95% { margin-top: -150px; }
}
<div id="Slides">
<div id="Serv-Slides"></div>
</div>
I've made a simple animation of a balloon moving from left to right side of the screen, but I want to make it as a parabolic movement instead of linear animation. Also I want to hide it from left site instead of starting on left:0;
Here's my actual code
$(document).ready(function() {
function loop() {
$('#promo').css({
left: 0
});
$('#promo').animate({
left: '+=100%',
}, 10000, 'linear', function() {
loop();
});
}
loop();
});
#promo {
position: absolute;
z-index: 500;
left: 0px;
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="promo">
<img border="0" alt="promo balloon" src="http://www.placehold.it/50" />
</div>
Adjust the left property of the balloon to -50px, so it's not visible at the start of the animation.
Also, to stop the scrollbars appearing, give the container of the balloon overflow: hidden. You could then use jQuery/JavaScript to adjust the width of the container to fit the browser's viewport on document ready, and window resize.
CSS
.balloon-container {
position: relative;
height: 200px; // Set a height of your container here, or use jQuery/JavaScript
}
.balloon {
position: absolute;
left: -50px;
}
jQuery
$(document).ready(function() {
function sizeContainer() {
$('.container').css('width', window.innerWidth);
}
function loop() {
$('.balloon').css('left', '-50px');
$('#promo').animate({
left: '+=100%',
}, 10000, 'linear', function() {
loop();
});
}
// Run initial functions.
sizeContainer();
loop();
$(window).resize(function() {
// Re-run functions on window resize.
sizeContainer();
});
});
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/