I have this code below where I want when I click the button, it will wait about 3 seconds to repeat the action.
The code is this:
$( ".menu-show").css({ "visibility":"hidden", "opacity":"0" }),
$( "#bt_web" ).hover(function() {
$( ".menu-show").css({ "visibility":"visible"}),
$( ".menu-show").animate({opacity: 1}, 500);
}, function() {
$( ".menu-show").css({ "visibility":"hidden"}),
$( ".menu-show" ).animate({opacity: 0}, 300);
});
$( "#bt_web" ).hover(function() {
$(this).animate({opacity: 0.2}, 500);
}, function() {
$(this).animate({opacity: 1}, 300);
});
Is there any function in jquery that makes it similar like "setTimeout" of action script?
thank you
Yes, you can use .delay() which delays in milliseconds the function.
An example would be:
$("#id").delay(600).fadeOut();
This would wait 600 milliseconds and then fadeOut().
(If this was what you were talking about)
Related
I have a function which keeps on executing i want that whole function(function main())to stop working after 3secs and it has to call another function
$(function main() {
$( "#button" ).click(function() {
$( "#effect" ).addClass( "newClass", callback );
});
function up() {
setTimeout(function() {
$( "#effect" ).addClass( "newClass", callback );
},1000);
}
function callback() {
setTimeout(function() {
$( "#effect" ).addClass( "down" ,up).removeClass('newClass');
}, 1000 );
}
});
In j query there is unbind function for unbind the event for html element following syntax
$(selector).unbind(event,function,eventObj)
Follow following code in your case. it will unbind click event of button after 3 sec.
setTimeout(function(){
$("#button").unbind("click");
}, 3000)
Very shortly after my animation starts, it goes out of sync.
The divs are supposed to fade in and fade out after one another.
Please take a look at my code below...
Thanks
(document).ready(function(){
animate_loop = function animate_loop(){
$( "#w01" ).animate({ opacity: 0.4, }, 1000,
function(){ $( "#w01").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w02" ).animate({ opacity: 0.4, }, 1500,
function(){ $( "#w02").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w03" ).animate({ opacity: 0.4, }, 2000,
function(){ $( "#w03").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w04" ).animate({ opacity: 0.4, }, 2500,
function(){ $( "#w04").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
});
If you want more control use the code below. I highly recommend using adding a class and then animating trough CSS instead of making a jquery loop.
Here's a new demo: http://jsfiddle.net/mirohristov/gw8kskom/1/
$(document).ready(function(){
$('#w01').delay(1000).queue(function(){
$(this).addClass("go");
});
$('#w02').delay(1500).queue(function(){
$(this).addClass("go");
});
$('#w03').delay(2000).queue(function(){
$(this).addClass("go");
});
$('#w04').delay(2500).queue(function(){
$(this).addClass("go");
});
});
If you are trying to just make a fade effect, use css and add a class at a different time with setInterval. Use .each(index, el) to iterrate trough each element. Index will be 1, 2, 3, 4, etc... so use that to delay your animation.
Here's a demo: http://jsfiddle.net/mirohristov/gw8kskom/
$(document).ready(function(){
$('.child').each(function(index, el){
setTimeout(function(){
$(el).addClass('go');
}, 200*index);
});
});
I wrote two javascripts to write my own modal system because the bootstrap one has so many issues. However when you click it the first time it will work correctly it will fade in, and when you click close it will fade out, but the next time you click show modal and then close modal it will animate 2 times on the fade in and 2 times on the fade out, then I click it a third time and the same thing will happen except it will animate 3 times. and so on. I supposed its how i wrapped my functions but im not quite sure. I'm still noob to javascript. No error is returned in console or debugger.
$(document).ready(function(){
$('#helppage').hide();
});
function displayHelp(){
$(document).click(function(){
$( "#helppage" ).fadeIn( "medium", function() {
});
});
}
function hideHelp(){
$(document).click(function(){
$( "#helppage" ).fadeOut( "medium", function() {
});
});
}
SPOKE TO SOON ..
function toggleHelp(){
$(document).click(function(){
if ($('#helppage').is(":visible")) {
$( "#helppage" ).fadeOut( "medium", function() {
});
} else {
$( "#helppage" ).fadeIn( "medium", function() {
});
}
});
}
The Real Working Code
**$(function toggleHelp() {
$(document).on('click', function() {
$('#helppage').fadeToggle('medium', function() {
});
});
});**
You are adding click events to the document each time the user clicks on the document. So each subsequent click and another instance to be triggered when the user clicks. So the firsat time its once, the second time it fires twice, etc.
I recommend putting the click on another element instead. Having said that, you could try something like this:
$(function() {
$(document).on('click', function() {
$('#helppage').fadeToggle('medium', function() {
// code here
});
});
});
Based on my comment above, without changing your code:
function toggleHelp(){
$(document).click(function(){
if ($('#helppage').is(":visible")) {
$( "#helppage" ).fadeOut( "medium", function() {
});
} else {
$( "#helppage" ).fadeIn( "medium", function() {
});
}
});
}
Struggling a bit with jquery animate.
At the moment, if I continue to click button, clearly it shifts the object to the right 50px every time
$( ".button" ).click(function() {
$( "#object" ).animate({opacity: 1,right: "+=50",}, 500, function() {}
);
Is there a way of ensuring that one click moves it once, then a second click does not move it?
ie. a rule that moves it to right:50px and thats it, rather than + 50px?
Any assistance hugely appreciated!!
Use .one()
$( ".button" ).one('click',function() {
Fiddle Demo
You can use one():
$(".button").one('click', function () {
$("#object").animate({
opacity: 1,
right: "+=50",
}, 500, function () {
});
});
or I'd suggest you to disable the button to let your users know about your intention here:
$(".button").click(function () {
var $this = $(this);
$("#object").animate({
opacity: 1,
right: "+=50",
}, 500, function () {
$this.prop("disabled",true);
});
});
I'm trying to animate a 'div' in the mobile version of my website.
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "15px"
}, 500 );
}
});
When the 'div' wil change position I'd like to be able to tap once again on it and let it return to its default position.
I tried to create an 'if' statement...but I can't understand why it doesn't work.
I'd like assume the 'marginLeft' of my 'div' as a variable for my javascript code in order to move it to the right if 'marginLeft=10px' and move it to the left (default position) if the "new" 'marginLeft is not equal to 10px anymore.
I've tried with the following code:
var x = ("#iconReorder").style.marginLeft;
if (x = "10px") {
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "15px"
}, 500 );
}
});
} else {
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "10px"
}, 1000 );
}
});
}
Can somebody help me?
I hope that what I said is understandable.
Thank you
So if I understood correctly, this should do:
var x = $("#iconReorder");
x.on('tap', function () {
var to = '10px', time = 1000;
if (x.css('margin-left') === '10px') {
to = '15px';
time = 500;
}
x.animate({
marginLeft: to
}, time);
});
or in action. I replaced tap event with click so that I could see what I'm doing. Anyway it should work better now.
There might be some slimmer way to make it work, but I can't think of any at the moment (maybe some toggle method).
try this
$( "#iconReorder" ).animate({
'margin-left': 15
}, 500 );