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>
Related
im trying to check a div position so when it comes to -100% left it returns to right 100%.
Im sutck in the part of checkin its position. Im using the console.log to check if it works, ive tried console.log(back1X.left) to.
$(document).ready(function(){
setInterval(function() {
var back1X = $('.back1').position();
},100);
$('.back1').animate({'left':'-100%'},50500);
console.log(back1X);
});
You can use jQuery .animate()'s complete callback to call a function when the animation ends:
$(document).ready(function() {
(function loop() {
$('.back1').css('left', '100%').animate({
'left': '-100%'
}, 2000, "linear", loop);
})();
});
.back1 {
position: absolute;
top: 0;
left: 100%;
padding: 1em;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="back1"></div>
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" />
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/
It's simple slide up animation. The problem is when I change "top" parameter of myDiv class, animation is working incorrectly, instead of sliding up, it slides down from top. It only works incorrectly when I click button for the first time. When I change myDiv's top parameter to a bigger number there is no more problem. Can you please help me to find what is wrong with the code.
<style>
.box {
position:relative;
width: 200px;
height: 500px;
}
.myDiv {
position: absolute;
width:100%;
overflow: hidden;
bottom:0px;
top:10px;
left:500;
}
</style>
<script>
var swt = 0;
$(document).ready(function () {
$(".b1").click(function () {
var div = $(".myDiv");
if (swt == 0) {
div.animate({
top: '300px',
opacity: '1'
}, "slow");
// div.animate({height:'300px', opacity:'1'},"slow");
swt++;
} else {
div.animate({
top: '500px',
opacity: '1'
}, "slow");
// div.animate({height:'0px', opacity:'1'},"slow");
swt--;
}
});
});
</script>
</head>
<body>
<button class="b1">Start Animation</button>
<p>posds</p>
<div class="box">
<div class="myDiv" style="background:#7549B1; width:200px;"></div>
</div>
</body>
</html>
I'm not really sure whay effect do you want, but maybe it's changing the bottom value instead of top:
if(swt==0){
div.animate({bottom:'500px', opacity:'1'}, "slow");
swt++;
} else {
div.animate({bottom:'300px', opacity:'1'}, "slow");
swt--;
}
http://jsbin.com/ixigaf/1/edit
Do not use bottom and top on a same element, it will create a conflict. Define height and animte top with negative value:
Here is jsFiddle.
if(swt==0){
div.animate({top:'-300px', opacity:'1'}, "slow");
swt++;
}else{
div.animate({top:'-500px', opacity:'1'}, "slow");
swt--;
}
http://jsfiddle.net/Cyberek/yLBeK/
This is as I understand buggy, but if You change in css top from 10px to 100px (same as top in js) everything should be ok.
.myDiv {
position: absolute;
width:100px;
height: 100px;
overflow: hidden;
top:100px;
left:100px;
background: red;
}
$(".b1").click(function () {
var div = $(".myDiv");
if (swt == 0) {
div.animate({
top: '100px',
opacity: '1'
}, "slow");
// div.animate({height:'300px', opacity:'1'},"slow");
swt++;
} else {
div.animate({
top: '200px',
opacity: '1'
}, "slow");
// div.animate({height:'0px', opacity:'1'},"slow");
swt--;
}
});