JQuery Animation - javascript

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

Related

Jquery animate get stuck

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>

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

jquery toggle slide animation to pure javascript animation

See here
https://jsfiddle.net/97Lahmoh/ OR http://www.w3schools.com/code/tryit.asp?filename=FB8TE2KSHGZ5
basically I want to use jquery ui toggle slide animation without any jquery and plugins.
this is jquery code which does the work.
$( "#effect" ).toggle("slide", {direction: "left"}, 500);
how to use it on pure javascript code? I'm not good at animations.
You can use css transition with position property.
try this one:
function toggle() {
var div1 = document.getElementById("div1");
if (document.getElementsByClassName("hide").length == 0) {
div1.className = "test hide";
} else {
div1.className = "test show";
}
}
.test {
width: 200px;
height: 100px;
background-color: #2354A4;
transition: left 2s;
position: relative;
top: 0px;
bottom: 0px;
right: 0px;
}
.hide {
left: -250px;
}
.show {
left: 0px;
}
<div id="div1" class="test hide">
</div>
<button id="btnToggle" onclick="toggle()" type="button" name="btnToggle">TOGGLE</button>
You can achive this by using css transition property.
Here is the JSFIDDLE

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

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

How to move an image/div from right to left continuously?

What I'd like to do is animate a small image as well as a div (or an image within a div) from the right to the left of the screen, repeating once the image/div leaves the screen.
I found an example online that moves an image/div from left to right, but not all the way to the other side of the screen, and I am struggling to make it from right to left.
Here's what I have been doing
function moveTruck() {
$("#ImageToMove").animate({
"margin-right": "5000px"
}, 3000, function () { $("#ImageToMove").css("margin-right", "10000"); moveTruck(); });
}
moveTruck();
Playing with the margin-right values. My CSS class is:
.HomeImageAnimate{
position:absolute;
margin-top:80px;
right:1000px;
}
Try setting , animating left property using values of window.innerWidth , container element width
(function fx(el) {
$(el).css("left", window.innerWidth)
.animate({
left: "-" + (window.innerWidth - $(el).width() * 2)
}, 3000, "linear", function() {
fx(this)
})
}($("div")))
body {
overflow: hidden;
}
div {
width: 50px;
height: 50px;
position: absolute;
}
img {
background: gold;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
<img />
</div>
Try this out, this truck div repeatedly goes from right to left.
HTML:
<div class="truck"></div>
CSS:
body{
background: green;
overflow: hidden;
}
.truck {
margin-top:20px;
width: 272px;
height: 174px;
cursor:pointer;
position: absolute;
margin-right: -150px;
z-index: 3;
background: red;
border-radius:4px;
width:200px;
height:50px;
}
JS:
$(function() {
var moveTruck = function(){
$(".truck").delay(2000).animate( {'right': '120%' }, 5000,'linear',function(){
$(this).css({'right': '-50px'});
moveTruck();
});
}
moveTruck();
})
CODEPEN DEMO
function move(){
width = $(window).width();
objectWidth = $('#demo').width();
margin = width + objectWidth + 'px';
restart = -100 - objectWidth + 'px';
$('#demo').animate({
'margin-left': margin
}, 3000, function(){
$('#demo').css('margin-left', restart);
move();
});
}
move();
Try this out, it calculates the exact width of object and window - should always work no matter the screen size. You were trying to use an absolute pixel value, won't always work.
https://jsfiddle.net/w9pgmm9d/3/

Categories