I have the below piece of code that moves a onto the screen when ?added is in the URL which works great. I now need to add a piece of code to it that then moves the back over after 5 seconds. I have noticed there's a delay function but I'm not sure how to add it into the code. Can anyone help? Many thanks!
$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
$('#popout-left-menu-container')
.animate({
'right': '2px'
}, 300);
};
});
You can use the setTimeout function to delay something in javascript. Maybe like this:
$('#popout-left-menu-container').animate({'right':'2px'},300);
setTimeout(function(){
//This is animation that runs after 5 seconds. You can use it to move the block back.
//You have to set your parameters yourself here
$('#popout-left-menu-container').animate({'right':'0px'},300);
}, 5000);
$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
setTimeout(function(){
$('#popout-left-menu-container')
.animate({
right:'2px'
},300);
},5000);
};
});
You should do it with .delay().
$("query").animate(firstAnimation, firstDuration).delay(milliseconds).animate(secondAnimation, secondDuration);
Related
I have a simple slide down function using jQuery where I'm simply animating an image to slide down. It works great. However I'm trying to reset the animation after it's ran, so it will continue on loop during the duration of the users session. I tried the below, but it didn't work as wanted, slide animation still ran, but not the sought effect of timing out and restarting. Thanks for any thoughts.
$(window).load(function () {
setTimeout(function(){
$("#man").show("slide", {
direction: "up"
}, 2000);
},500);
});
You can call a function after it completes the 2000ms transition.
Updated fiddle: http://jsfiddle.net/CqR9E/392/
$(window).load(function () {
setTimeout( go(),500);
});
function go(){
$("#man").show("slide", {
direction: "up"
}, 2000, function(){
$( "#man:visible" ).removeAttr( "style" ).fadeOut();
go();
});
}
I am new to JavaScript and jQuery. I have trouble in my new project. I want to need a image is bouncing. I got a script from net. But This function is only for jumping on the click.I want its jumping when the site is loaded. Please help me.
Link http://www.tycoonlabs.com/help/bouncing%20-%20Copy.html
This is my script
<SCRIPT>
$(function(){
$('#bouncy1').click(function () {
$(this).effect("bounce", { times:5 }, 300);
});
});
</SCRIPT>
Thanks and Regards
If you want to have it bounce while something is happening and then stop it, you could use setInterval
var interval = setInterval(function(){
jQuery('#someId').effect('bounce', {times: 5}, 300);
}, 500); // every half second
// Do some stuff to load up your site;
clearInterval(interval); // Stop the bounce interval
You may want to adjust the times parameter and the delay to meet your needs and effect.
Try this:
<script>
$(function(){
function bounceObject(obj)
{
obj.effect("bounce", { times:5 }, 300);
}
bounceObject($('#bouncy1'));
$('#bouncy1').click(function () {
bounceObject($(this));
});
});
</script>
this works well
function bounce(){
$('#test').effect( "bounce", "slow", bounce);
}
bounce();
http://jsfiddle.net/xGe2D/
$('#nav-menu').bind("mousedown touchstart", function(){
if ($('#patients-panel').hasClass('open')) {
$('#patients-panel').animate({
left: '-165px',
}, 500);
$('#patients-panel').removeClass('open');
$('#nav-patients').removeClass('active');
}
slideMenu();
$('#menu-panel').toggleClass('open');
$('#nav-menu').toggleClass('active');
swapImage();
});
$('#nav-patients').bind("mousedown touchstart", function(){
if ($('#menu-panel').hasClass('open')) {
$('#menu-panel').animate({
left: '-165px',
}, 500);
$('#menu-panel').removeClass('open');
$('#nav-menu').removeClass('active');
}
slidePatientMenu();
$('#patients-panel').toggleClass('open');
$('#nav-patients').toggleClass('active');
swapImage();
});
I would like to add a 3 sec timer to my Slide out Menu; So, essentially; after the menu 'Slides Out' it will slide back in within 3 seconds. How could I write this?
Basically, this is what you need to do, at the end of the callback functions that "show" the menu's, add this:
setTimeout(function()
{
$('#patients-panel').animate({left: '0px'}, 500);
},3000);
This should do the trick.
Why not just set a setTimeout to call your "close window function"?
setTimeout(myCloseWindowFunction,3000);
....
myCloseWindowFunction(){
//do stuff
};
You would just put the timer in each of your .bind functions. It opens.. timer ticks down miliseconds and then calls a "closer" function
I have a simple fadeIn fadeOut animation, it's basically a blinking arrow. However, it doesn't loop. It just goes once, and it's done. I found an answer here -> How to repeat (loop) Jquery fadein - fadeout - fadein, yet when I try to follow it, mine doesn't work.The script for the animation is
<script type="text/javascript">
$(document).ready(function() {
$('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
$('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
});
</script>
the script given in the answer is
$(function () {
setInterval(function () {
$('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
}, 5000);
});
so I assume the end combination would be
$(document).ready(function() {
setInterval(function () {
$('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
$('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
}, 5000);
});
</script>
Could someone please point out what I'm doing wrong? thanks
Two details :
You have to set the interval to 10000 because your animation run 10s
If you want it to start now, you have to call it one time before executing the interval (the first execution of the interval is after the delay)
--
$(document).ready(function() {
function animate() {
$('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
$('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
}
animate();
setInterval(animate, 10000);
});
Demonstration here : http://jsfiddle.net/bjhG7/1/
--
Alternative code using callback instead of setInterval (see comments):
$(document).ready(function() {
function animate() {
$('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
$('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000, animate);
}
animate();
});
Demonstration here : http://jsfiddle.net/bjhG7/3/
function fadein(){
$('#picOne,#picTwo').animate({'opacity':'1'},1000,fadeout())
}
function fadeout(){
$('#picOne,#picTwo').animate({'opacity':'0'},1000,fadein())
}
fadein()
Take advantage of the callback argument of .fadeOut(). Pass a reference to the function that does the fading as the callback parameter. Choose which image to fade based on a counter:
$(function() {
var imgs = $('#picOne,#picTwo');
var fadeCounter = 0;
(function fadeImg() {
imgs.eq(fadeCounter++ % 2).fadeIn(1000).delay(3000).fadeOut(1000, fadeImg);
})();
});
Demo: http://jsfiddle.net/KFe5h/1
As animation sequences get more complex, I've found using async.js leads to more readable and maintainable code. Use the async.series call.
I am trying to make a div bounce every 4 seconds and after 15 seconds fadeOut. The code bellow makes the div disappear and the bounce doesn't happen.
$(document).ready(function(){
function salta() {
$('.recomenda').effect("bounce",{ times:4 },300);
}
setInterval(salta, 4000);
$('.recomenda').delay(15000).fadeout('slow');
});
This isn't doing the job, any hint you can give me?
Kind regards.
With the help of Matt i figured how to do it:
function salta() {
$('.recomenda').effect("bounce",{ times:4 },300);
}
var interval = setInterval(salta, 3500);
setTimeout(function (){
clearInterval(interval);
$('.recomenda').fadeOut('slow');
}, 15000);
Edit - final version
$(document).ready(function ()
{
var $recomenda = $('.recomenda');
function salta()
{
$recomenda.effect('bounce', {times:4}, 300);
}
salta();
var interval = setInterval(salta, 4000);
setTimeout(function ()
{
// stop the interval from running unnecessarily
clearInterval(interval);
$recomenda.fadeOut('slow');
}, 15000);
});
There were 2 other problems:
fadeout() instead of fadeOut()
Using .delay() was interfering with the bounce effect
Demo: http://jsfiddle.net/mattball/a2F3W/