can someone please help i am trying to animate a div so that it moves 100px to the left and then returns back to its original position/so moves back over to the right by 100px.
i want it to do this 5 times before stoping the animation.
can someone please show me how to get this to work thanks.
<script>
function loop() {
$('.sign_up').animate({right:'+=100px'}, 1000, function() {
$(this).animate({left:'-=100px'}, 1000, function() {
loop();
});
});
}
$(function() {
loop();
});
</script>
You can use a counter to determine when to stop looping. For example:
<script type="text/javascript">
var loopCount = 0;
function loop() {
$('.sign_up').animate({ left: '-=100px' }, 1000, function () {
$(this).animate({ left: '+=100px' }, 1000, function () {
loopCount++;
if (loopCount < 5)
loop();
});
});
}
$(function () {
loop();
});
</script>
I also switched the first animate statement to animate to the left using the left css property instead of right. This code worked for for me when I declared the sign_up div as follows:
<div class="sign_up" style="position:absolute;top:300px;left:300px;width:200px;height:200px;background:Green;">
Hello!
</div>
UPDATE
Here's a working jsfiddle: http://jsfiddle.net/peFVT/
Related
I am using a recursive callback with the animate() jquery function.
However the page crashes everytime from the start.
var goingDown = true;
function animateChevron() {
if (goingDown) {
goingDown = !goingDown;
$('#chevron').animate({'opacity': 1}, 500, animateChevron);
}
else {
goingDown = !goingDown;
$('#chevron').animate({'opacity': 0.1}, 500, animateChevron);
}
}
$(document).ready(function(){
animateChevron();
});
Thank you
EDIT: I want it to act in a loop: the chevron appears, then disappears, then appears again etc. As long as the user is on the page.
Try this
$('#chevron').animate({'opacity': 1}, {
duration: 500,
complete: animateChevron
});
Also you can make this better
function animateChevron() {
$('#chevron').animate({'opacity': 1}, {
duration: 500
}).animate({'opacity': 0.1}, {
duration: 500,
complete: animateChevron
});
}
Please try this
$(document).ready(function(){
var speed=500; //in micro seconds
setInterval(function(){
var opacity=$('#chevron').css('opacity')<1 ? 1 : .1;
$('#chevron').animate({'opacity':opacity},speed);
},speed);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chevron">Chevron</div>
Your code is recursing infinitely.
I changed it to add a parameter goingDown, which when true will cause the animation to hide the chevron, and set the state of a global variable downState to match goingDown. I removed the recursion, you don't need it.
var downState = null;
function animateChevron(goingDown) {
if (!goingDown) {
$('#chevron').animate({
'opacity': 1
}, 500);
} else {
$('#chevron').animate({
'opacity': 0.1
}, 500);
}
downState = goingDown;
}
$(document).ready(function() {
animateChevron(true);
});
#chevron {
font-size: 28px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="chevron">
ยป
</div>
Here is another solution due to the solution I offered first (can still be found at the bottom of this answer) didn't fit the needs of the asker.
According to the following question async callbacks will not cause any stack overflows.
Will recursively calling a function from a callback cause a stack overflow?
(function animateChevron() {
// Chevron visible at this point
$('#chevron').animate({'opacity': 0}, 500, () => {
// Chevron invisible at this point
$('#chevron').animate({'opacity': 1}, 500, animateChevron);
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chevron">Chevron</div>
I found a very neat solution right here at stackoverflow as alternative.
How to make blinking/flashing text with css3?
Code snippet by Mr. Alien:
(function blink() {
$('#chevron').fadeOut(500).fadeIn(500, blink);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chevron">Chevron</div>
<script type="text/javascript">
$(function (){
$(".links").click(function(){
$('.slider').stop(true,false).animate({right: "0" }, 800, 'easeOutQuint' ); },
function(){
$(".slider").stop(true,false).animate({right: "-200" }, 800, 'easeInQuint' ); },1000);
});
</script>
I am building a little slider on my website. The slider position is right: -200. It slides to position right:0 I want to animate it back to position right: -200 after clicking anywhere else on the page.
I tried all the ways which failed. toggle(slide) works good but doesn't looks good.
well, here you go
$(document).click(function(e){
e.preventDefault();
if($(e.target).closest("your_slider_selector").length) return;
//here you can do what you want
});
Bind click on all document, stop current animation, run new animation.
$(document).click(function () {
$('.slider').stop(true).animate({right: -200}, 500);
});
Store the CSS value in a variable before you animate the slider:
var right = $('.slider').css("right");
And then you can just use the variable:
$('.slider').stop(true).animate({right: right}, 800);
Here an example: http://jsfiddle.net/ctdjkrLx/2/
$(document).ready(function() {
$("#slide").delay(5000).animate({right: 0}, 500);
});
#slide {
position: absolute;
right: -155px; overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide"><img src="pic.jpg"></div>
Right now my code is working with a delay of 5 seconds then the photo slides out from the right side. I need to change this so it stays in the "right:-155" position until you hover over the image. Once you hover it should slide out to "0" and hold it there for about 6 seconds. If the user moves the mouse off it should just go back to the original position.
Can anyone help me?
Try:
$(document).ready(function () {
$("#slide").hover(function (e) {
$(this).stop().delay(5000).animate({
right: e.type === "mouseenter" ? 0 : "-155px"
}, 500);
});
});
Or better toggle some class.
Bit late to the game, and I see you already have a "working" answer, however, think this works slightly better:
$('#slide').hover(function () {
$(this).stop( true, true ).animate({right: 0}, 500);
timeout = window.setTimeout(function(){
$('#slide').trigger('mouseleave');
}, 5000);
},function(){
window.clearTimeout(timeout);
$(this).animate({right: -500}, 500);
});
Here it is in action - http://jsfiddle.net/w7ybb/
I have this function:
$(".insidediv").hide();
$(".floater").mouseenter(function(){
$(".hideimg").fadeOut(function(){
$(".insidediv").fadeIn();
});
});
$(".floater").mouseleave(function(){
$(".insidediv").fadeOut(function(){
$(".hideimg").fadeIn();
});
});
the function built to make a little animation, when you 'mouseenter' the div the picture I have there is hidden and than a few text show up.
it works fine if i move the mouse slowly. but if i move my mouse fast over the div the function getting confused or something and it shows me both '.insidediv and .hideimg,
how can i fixed that little problem so it wont show me both? thanks!
You need to reset the opacity, because fadeIn and fadeOut uses this css property for animation. Just stopping the animation is not enough.
This should work:
var inside = $(".insidediv"),
img = $(".hideimg");
duration = 500;
inside.hide();
$(".floater").mouseenter(function () {
if (inside.is(":visible"))
inside.stop().animate({ opacity: 1 }, duration);
img.stop().fadeOut(duration, function () {
inside.fadeIn(duration);
});
});
$(".floater").mouseleave(function () {
if (img.is(":visible"))
img.stop().animate({ opacity: 1 }, duration);
inside.stop().fadeOut(duration, function () {
img.fadeIn(duration);
});
});
I just introduced the duration variable to get animations of equal length.
Here is a working fiddle: http://jsfiddle.net/eau7M/1/ (modification from previous comment on other post)
try this:
var $insideDiv = $(".insidediv");
var $hideImg = $(".hideimg");
$insideDiv.hide();
$(".floater").mouseenter(function(){
$hideImg.finish().fadeOut(function(){
$insideDiv.fadeIn();
});
}).mouseleave(function(){
$insideDiv.finish().fadeOut(function(){
$hideImg.fadeIn();
});
});
This will solve your issue:
var inside = $(".insidediv"),
img = $(".hideimg");
inside.hide();
$(".floater").hover(function () {
img.stop(true).fadeOut('fast',function () {
inside.stop(true).fadeIn('fast');
});
},function () {
inside.stop(true).fadeOut('fast',function () {
img.stop(true).fadeIn('fast');
});
});
Updated Fiddle
You need to set the 'mouseleave' function when the mouse is still inside the
'floater' div.
Try this (i have tried it on the jsfiddle you setup and it works):
.....
<div class="floater">Float</div>
<div class="insidediv">inside</div>
<div class="hideimg">img</div>
var inside = $('.insidediv'),
img = $('.hideimg');
inside.hide();
$('.floater').mouseenter( function() {
img.stop().hide();
inside.show( function() {
$('.floater').mouseleave( function() {
inside.hide();
img.fadeIn();
inside.stop(); // inside doesn't show when you hover the div many times fast
});
});
});
.....
I just finished developing this Wordpress theme:
http://www.minnesdiner.com/
Everything is working well, but I'm not 100% happy with the navigation.
The sliding position indicator works smoothly, but I'd like to integrate the hover intent jQuery plugin to prevent the sliding indicator from sliding when the user unintentionally passes over the nav.
Any ideas as to how I could integrate this plugin? I'm currently firing a separate jQuery function for each nav item and passing coordinates to the sliding indicator based on which item is being hovered upon.
Here's my current jQuery code:
$(document).ready(function() {
var $currentpos = $("#menu-indicator").css("left");
$("#menu-indicator").data('storedpos', $currentpos);
$(".current-menu-item").mouseenter(function () {
$("#menu-indicator").stop().animate({left: $currentpos}, 150);
});
$(".menu-item-26").delay(500).mouseenter(function () {
$("#menu-indicator").stop().animate({left: "52px"}, 150);
});
$(".menu-item-121").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "180px"}, 150);
});
$(".menu-item-29").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "310px"}, 150);
});
$(".menu-item-55").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "440px"}, 150);
});
$(".menu-item-27").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "570px"}, 150);
});
$(".menu-item-164").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "760px"}, 150);
});
$delayamt = 400;
$("#header-row2").click(function () {
$delayamt = 5000;
});
$("#header-row2").mouseleave(function () {
$("#menu-indicator").stop().delay($delayamt).animate({left: $currentpos}, 600);
});
});
As you can see, I need to bind mousover and mouseout to separate elements (list-item and containing div).
Thanks!
If all you want to do is avoid the user triggering the slide by mousing over the nav, I would just setTimeout in your hover function to call your sliding code after a certain amount of time has passed, and clear the timeout on the mouseout event. No extra plugin needed.
For example:
var hover_timer;
$('.menu-item').hover(
function() {
hover_timer = setTimeout(function() {
...
}, 500);
},
function() { clearTimeout(hover_timer); }
);
EDIT: by the by, you should be combining all those hover functions into one. You can do something like:
$('.menu-item-26').data('slider-pos', '52px');
$('.menu-item-121').data('slider-pos', '180px');
...
And then in the code to slide, call it back:
$this = $(this);
$('#menu-indicator').stop().animate({left: $this.data('slider-pos')}, 150);
And that's just a start - you can generalize it even more, I bet.