move box from right to left continously using jquery - javascript

i want to move box right then left and again right left continously but it make only one cycle
$(document).ready(function() {
function a() {
$('#foo').css({
'right': window.innerWidth - $('#foo').width(),
'left': 'auto'
}).animate({
'right': '0px'
}, 9000, function() {
$('#foo').animate({
'left': '0px'
}, 9000, a);
});
}
a();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="background: red; width: 100px; height: 100px; position: absolute" ></div>
any help ??

Yes, it works without any problem.
$(document).ready(function() {
function a() {
$('#foo').css({
'right': window.innerWidth - $('#foo').width(),
'left': 'auto'
}).animate({
'right': '0px'
}, 9000, function() {
$('#foo').animate({
'left': '0px'
}, 9000, a);
});
}
a();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="background: red; width: 100px; height: 100px; position: absolute" ></div>
https://jsfiddle.net/n7u7q42d/
Probably you have loaded multiple libraries. Could you post errors please?

Your code already does what you are asking for:
$(document).ready(function() {
function a() {
$('#foo').css({
'right': window.innerWidth - $('#foo').width(),
'left': 'auto'
}).animate({
'right': '0px'
}, 9000, function() {
$('#foo').animate({
'left': '0px'
}, 9000, a);
});
}
a();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="background: red; width: 100px; height: 100px; position: absolute" ></div>
But, you can also accomplish the same thing with much better performance if you use use CSS animations:
#foo {
background: red;
width: 100px;
height: 100px;
position: absolute;
left:0px; /* This is the property that will be animated */
animation:9s leftRight infinite; /* configure the animation */
}
#keyframes leftRight {
0% {
left:0;
}
50% {
left:calc(100% - 100px);
}
100% {
left:0;
}
}
<div id="foo"></div>

Related

Using bounce animation on a scaled element

What is the best way to have something scale and then perform a bounce animation at that scale factor before going back to the original scale factor. I realize I could do something like scaling it to 2.2, then 1.8, then 2.0, but I'm looking for a way where you just have to perform the bounce animation on the scale factor because my scale factor will change. Here is my example. Basically I want to combine the two to work like I said but as you can see the bounce animation performs based off the div size prior to scaling. P.S I want this done in one action, the two buttons were just for the example.
function myFunction() {
var image = document.getElementById('test');
image.style.WebkitTransform = ('scale(2,2)');
}
function myFunction2() {
var image = document.getElementById('test');
image.classList.remove('bounce');
image.offsetWidth = image.offsetWidth;
image.classList.add('bounce') ;
}
div#test {
position:relative;
display: block;
width: 50px;
height: 50px;
background-color: blue;
margin: 50px auto;
transition-duration: 1s;
}
.bounce {
animation: bounce 450ms;
animation-timing-function: linear;
}
#keyframes bounce{
25%{transform: scale(1.15);}
50%{transform: scale(0.9);}
75%{transform: scale(1.1);}
100%{transform: scale(1.0);}
}
<div id='test'> </div>
<button class = 'butt' onclick = 'myFunction()'>FIRST</button>
<button class = 'butt' onclick = 'myFunction2()'>SECOND</button>
Just a series of jquery animations that change by a set number of pixels should do the trick. You could always use something like parseInt($('#test').css('width')) in the math for how much to change if you want scaled-up objects to bounce more/less
function scaleUp() {
var image = document.getElementById('test');
image.style.WebkitTransform = ('scale(2,2)');
}
function bounce() {
$('#test').animate({
'width': "-=20",
'height': "-=20"
}, 150);
$('#test').animate({
'width': "+=30",
'height': "+=30",
}, 150);
$('#test').animate({
'width': "-=20",
'height': "-=20",
}, 150);
$('#test').animate({
'width': "+=10",
'height': "+=10",
}, 150);
}
div#test {
position:relative;
display: block;
width: 50px;
height: 50px;
background-color: blue;
margin: 50px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> </div>
<button class = 'butt' onclick = 'bounce()'>Bouncey</button>
<button class = 'butt' onclick = 'scaleUp()'>Scale up bouncey</button>
Here's them combined into one with an animation for growing / shrinking:
function scaleUp() {
var image = document.getElementById('test');
image.style.WebkitTransform = ('scale(2,2)');
}
function bounce() {
const width = parseInt($('#test').css('width'));
const height = parseInt($('#test').css('height'));
$('#test').animate({
'width': parseInt($('#test').css('width'))*2.2,
'height': parseInt($('#test').css('height'))*2.2
}, 300);
$('#test').animate({
'width': "-=20",
'height': "-=20"
}, 150);
$('#test').animate({
'width': "+=30",
'height': "+=30",
}, 150);
$('#test').animate({
'width': "-=20",
'height': "-=20",
}, 150);
$('#test').animate({
'width': "+=10",
'height': "+=10",
}, 150);
$('#test').animate({
'width': width,
'height': height
}, 300);
}
div#test {
position:relative;
display: block;
width: 50px;
height: 50px;
background-color: blue;
margin: 50px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> </div>
<button class = 'butt' onclick = 'bounce()'>Bouncey</button>

moving div right left continously in jquery

I am trying to move a div continuously left and right on page load. But what I did is moving on click. And that's what I don't want. Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
left | right
<br /><br />
<div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>
<script>
$('.right').click(function(e) {
e.preventDefault();
$('#foo').css({ 'right': '0px', 'left': '' }).animate({
'right' : '30px'
});
});
$('.left').click(function(e) {
e.preventDefault();
$('#foo').css({ 'right': '', 'left': '0px' }).animate({
'left' : '30px'
});
});
</script>
You can do this with CSS animation
#foo {
background: red;
width: 100px;
height: 100px;
position: absolute;
left: 0;
animation: leftRight linear 3s infinite alternate;
}
#keyframes leftRight {
to {
left: 100%;
transform: translateX(-100%);
}
}
<div id="foo"></div>
The auto values are not correctly automatically assigned by jQuery or the browser.
Use something like this:
$('.right').click(function(e) {
e.preventDefault();
$('#foo').css({ 'right': window.innerWidth - $('#foo').position().left - $('#foo').width(), 'left': 'auto' }).animate({
'right' : '30px'
});
});
$('.left').click(function(e) {
e.preventDefault();
$('#foo').css({ 'left': $('#foo').position().left, 'right': 'auto' }).animate({
'left' : '30px'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
left | right
<br /><br />
<div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>
As your question says, if you want it to automatically do either, on page load, do this:
$(function () {
function a() {
$('#foo').css({ 'right': window.innerWidth - $('#foo').position().left - $('#foo').width(), 'left': 'auto' }).animate({
'right' : '30px'
}, function () {
$('#foo').css({ 'left': $('#foo').position().left, 'right': 'auto' }).animate({
'left' : '30px'
}, a);
});
}
a();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<br /><br />
<div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>

Stop animation on mouseleave

I was looking around SO and couldn't really find a good concrete answer. My problem is that when the .mouseenter(function(){ }) is fired and the .mouseleave(function(){ }) is fired right after it completes both animation, instead I want the .mouseleave(function(){ }) to stop the .mouseenter(function(){ }) from finishing it's animation.
Here' a jsfiddle of how I currently have it.
HtML:
<div id="header">
<div id="header-align">
</div>
</div>​
CSS:
#header {
width: 100%;
height: 200px;
position: fixed;
top: -170px;
}
#header #header-align {
width: 400px;
height: 100%;
border: 1px dotted #000;
margin: 0 auto 0;
}
jQuery
​$("#header").mouseenter(function(){
$(this).animate({ top: -20 }, {
duration: 'slow',
easing: 'easeOutBack'
})
});
$("#header").mouseleave(function(){
$(this).animate({ top: -170 }, {
duration: 'slow',
easing: 'easeOutBack'
})
});
I was thinking something like bind(function(){ }) or something like .stopPropagation() but couldn't find a good answer
Did you try adding in a .stop()?
$(this).stop().animate({ top: -170 }, {
duration: 'slow',
easing: 'easeOutBack'
})
jsFiddle
You may also consider using .hover().
​$("#header").hover(function(){
$(this).stop().animate({ top: -20 }, {
duration: 'slow',
easing: 'easeOutBack'
})
},
function(){
$(this).stop().animate({ top: -170 }, {
duration: 'slow',
easing: 'easeOutBack'
})
});

How to control animate function on button click?

I have two divs named "arrow" and "inner". I am trying to control the animate slide function when the div is clicked but have been unfortunate. The issue is noticeable when clicking very fast on the "arrow" div after user stops clicking the div is still sliding. I set the animate function under a small delay but I still experience lag. Here is my example code:
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script language="javascript">
$(document).ready(function() {
var out = 0;
$("#arrow").click(function(){
if(out==0)
{
$("#inner").animate({marginRight: "0px"}, 500 );
out=1;
}
else
{
$("#inner").delay(400).animate({marginRight: "-100px"}, 500 );
out=0;
}
});
});
</script>
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;">
<div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div>
<div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div>
</div>
Just change your code
$("#inner").animate({marginRight: "0px"}, 500 );
to
$("#inner").stop(true, true).animate({marginRight: "0px"}, 500 );
and
$("#inner").animate({marginRight: "-100px"}, 500 );
to
$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500 );
Please see following Link for example : http://jsfiddle.net/UAYTw/1/
you can also use $("#inner").stop(true, false).animate() instead of $("#inner").stop(true, true).animate(). as per your choice.
Using Ravi's code props to him - toggle is cleaner in my opinion
DEMO
$(document).ready(function() {
$("#arrow").toggle(
function(){
$("#inner").stop(true, true).animate({marginRight: "0px"}, 500 );
},
function(){
$("#inner").stop(true, true).animate({marginRight: "-100px"}, 500 );
}
);
});
You can use .animate().stop() method to stop the animation.
Demo: http://jsfiddle.net/YKn7c/
this may help:
$("#button").hover(
function () {
$("#effect").stop().animate({ opacity: '1', height: '130' }, 300);
},
function () {
$("#effect").stop().animate({ opacity: '0', height: '130' }, 300);
}
);
edited:
If You dont want to be closed:
$("#button").hover(
function () {
$("#effect").stop().animate({ opacity: '1', height: '130' }, 300);
},
null
);

Slide Element Up Into Page?

I was wondering how I could slide up a banner at the bottom of my page that is hidden.
For instance:
Page loads
3 seconds later, the banner slides up from bottom of page
I want to be able to do this without any scrollbars appearing (no change in page height) and without revealing the banner prior to it sliding up.
I looked at slideUp() and slideToggle(), but I couldn't find a way to make it work to my liking :-/
Here's what I originally tried:
$(document).ready(function() {
$('.serverad').delay(3000).slideToggle('slow', function() {
// Animation complete.
});
});
And the CSS was visiblity: hidden;
use a position:fixed on the banner ad, and animate the bottom attribute to 0
have the initial bottom attribute be the a negative of its height.
<style>
.serverad
{
height:60px;
position:fixed;
left:0px;
bottom:-60px;
}
</style>
<script>
$(document).ready(function() {
$('.serverad').delay(3000).animate({bottom:"0px"},600);
});
</script>
I think you may want something along these lines:
HTML:
<body>
<div class="serveraddcontainer">
<div class="serveradd"></div>
</div>
</body>
CSS:
body{
overflow: hidden;
}
.serveraddcontainer{
width: 100%;
height: 80px;
position: absolute;
bottom: -80px;
}
.serveradd{
width: 400px;
height: 80px;
background-color: red;
margin: auto;
}
Javascript:
setTimeout(function(){
$('.serveraddcontainer').animate({'bottom': '0'});
}, 3000);
Example JSFiddle Here
Animate the height property instead of top:
In you CSS:
.serverad {
...
height: 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
visiblity: visible;
overflow: hidden;
...
}
And in your JS, change the animation code to:
$(document).ready(function() {
$('.serverad').delay(3000).animate({height: '30px'}, 'slow', function() {
// Animation complete.
});
});
Here's one approach:
var stepDurations = 3000;
var reveal = window.setTimeout(
function(){
$('#banner').animate(
{
'height' : '30px'
}, stepDurations,
function(){
$(this).animate(
{
'bottom' : $(window).height() - $(this).height()
}, stepDurations);
});
},stepDurations);
JS Fiddle demo.
Turned the above into a function:
function slideReveal(target, height, stepDuration, revealName){
if (!target) {
return false;
}
else {
var height = height || '30px',
stepDuration = stepDuration || 2000,
revealName = revealName || 'reveal';
revealName = window.setTimeout(
function(){
$(target).animate(
{
'height' : height
}, stepDuration,
function(){
$(this).animate(
{
'bottom' : $(window).height() - $(this).height()
}, stepDuration);
});
},stepDuration);
}
};
// call with:
slideReveal($('#banner'), '3em', 100, 'revelation');
JS Fiddle demo.

Categories

Resources