I was wondering if I can make my div do something just to look more attractive . However , I want my div to fade in then go back normally automatically . I tried fade in for seconds with a function ,, but I need it to be back quickly . How can this be done ? Any help ? Thankyou
$(document).ready(function() {
window.setTimeout("fadeMyDiv();", 3000); //call fade in 3 seconds
}
)
function fadeMyDiv() {
$("#test").fadeOut('slow')
}
jQuery's fadeIn and fadeOut accept another parameter which is a callback function that get called when the fade in/out is done. You can use it like:
var $div = $("#test");
$div.fadeIn("slow", function() {
$div.fadeOut("slow");
});
And you can use delay to make a delay between the fade in and out:
$("#test").fadeIn("slow") // fade in
.delay(1000) // wait 1000 ms (1 second)
.fadeOut("slow"); // fade out
Loop forever:
var $div = $("#test");
setInterval(function() {
$div.fadeIn("slow", function() { $div.fadeOut("slow"); });
}, 2000);
Related
Based on a condition i am assigning a new message to a variable then showing the message using jquery.Now after 2 seconds i want to hide the message and show another new message.The problem is as i am not showing the message into a html div so i am confused how to attain this ?
if(newresp == "success")
{
var newmsg="<img src=\"images/myimg.png\"><span style='color:#00CCFF;font-size:25px;margin-top:2px'> validated!</span>";
var newmsg1="redirecting ......";
$("#status").hide().fadeIn('slow').html(newmsg);
// i want to hide this newmsg now and then show the newmsg1
}
You can use the javascript setTimeout method.
if(newresp == "success")
{
var newmsg="<img src='images/myimg.png'><span style='color:#00CCFF;font-size:25px;margin-top:2px'> validated!</span>";
var newmsg1="redirecting ......";
$( "#status" ).hide().fadeIn( 500 ).html(newmsg).delay( 2000 ).fadeOut( 500 );
setTimeout(function() {
$( "#status" ).hide().fadeIn(500 ).html(newmsg1).delay( 2000 ).fadeOut( 500 );
}, 3000);
setTimeout(function() {
window.location='http://google.com';
}, 6000);
};
Demo
The first SetTimeout delay is 3000 (3 seconds), the sum of time the first message is visible (500+2000+500)
The second SetTimeout delay is 6000 (3''+3'') and then redirects.
not sure about your entire scenario, but here's a quick fiddle to demonstrate the idea.
basically you want to wrap the content in a div or something and give it an id so you can call it specifically
Create new DOM elements like this:
var img = $('<img src=\"images/myimg.png\">');
var span = $('<span style="color:#00CCFF;font-size:25px;margin-top:2px"> validated!</span>');
Then .append() them both to the div and fade it in. You need to wait for the fade to finish like this:
$(selector).fadeIn('slow', function() {
// will be called when the element finishes fading in
});
Then you can say: $('div.status span').html('Your new message');
You can use the jQuery delay function to wait.
So...
$("#status").hide().fadeIn('slow').html(newmsg).delay( 20000 ).fadeOut('slow').delay( 20000 ).html(newmsg1).fadeIn('slow');
This gives a 2 second delay between both. 2000 is milliseconds = 2 seconds
Edit:
Use the setTimeout function instead...
var newmsg="<span style='color:#00CCFF;font-size:25px;margin-top:2px'>Your click is validated!</span>";
var newmsg1="ok";
$("#verify_status").hide().html(newmsg).fadeIn('slow', function(){
setTimeout(function(){
$("#verify_status").hide().html(newmsg1).fadeIn('slow');
}, 2000);
});
I have some div in my page that when an user drags one of them the div would fade out.It's work but div fadeout after 6 second immediately.
$(function(){
$( ".comment-list.clearfix" ).draggable({axis: "x"},{
start: function() {
$(this).fadeOut(6000);
},
});
});
Use setTimeout() for delay like,
start: function() {
var $this=$(this);
setTimeout(function(){
$this.fadeOut(6000);
},5000); // 5 seconds timeout, for example
}
or use delay() like,
start: function() {
$(this).delay(5000) // 5 seconds delay, for example
.fadeOut(6000);
}
Note: You can change delay interval, as you required.
I have a simple jQuery code which swaps two images by hiding one and displaying the other, I'm seeking to swap the images using a fade in fade out effect, but since the two images aren't lying on top of each other I cant simply fade the top image resulting on showing the bottom one,
I want to fade the first image then set the css display property to none then show the second image with 0 opacity and gradually set the second images opacity to 100. But when I add the code which fades the images, it doesn't work and the display none doesn't wait for the fade to finish. How can I make the functions wait for the one before to finish?
$('.thumbs').hover(
function() {
console.info('in');
$(this).children('.first').css('display','none');
$(this).children('.second').css('display','block')
},
function() {
console.info('out');
$(this).children('.second').css('display','none');
$(this).children('.first').css('display','block')
}
);
HTML Code:
<div class='thumbs'>
<div class='first'><?php the_post_thumbnail()?></div>
<div class='second'><?php MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');?></div>
</div>
1) delay() method allows us to delay the execution of functions that follow it in the queue.
http://api.jquery.com/delay/
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
2) use callbacks
$("#divId1").animate({opacity:.1},1000,function(){
$("#divId2").animate({opacity:.1},1000);
});
Like so:
setTimeout(function() {
console.log('out');
$(this).children('.second').css('display', 'none');
$(this).children('.first').css('display', 'block');
}, 1000);
I have not tested but this should do the job:
$('.thumbs').hover(
function(){
var $that = $(this);
$(this).children('.first').fadeOut(1000, function(){
$(this).css('display','none');
$that.children('.second').fadeIn(500);
});
}
,
function(){
var $that = $(this);
$(this).children('.second').fadeOut(1000, function(){
$(this).css('display','none');
$that.children('.first').fadeIn(500);
});
}
);
Try
$('.thumbs').hover(
function() {
var second = $(this).children('.second');
$(this).children('.first').fadeOut(1000, function(){
second.fadeIn(1000,function(){});
});
},
function() {
var first= $(this).children('.first');
$(this).children('.second').fadeOut(1000, function(){
first.fadeIn(1000,function(){});
});
}
);
Working Fiddle
I'm am attempting to build a homepage that has animations. I am having hard time controlling my animations though. All I need is to hide elements, and then show elements after a certain time. Loop through that sequence, and pause and show all elements when the someone hovers over the box. Example simple animation.
I have a long way to go. At first I tried using the .css() visibility property, now I'm using .show() and .hide().
I need a way to loop through my animations. I attempt to add another
setTimeout(clear1(), 3000);
to the end of my box1 function, but that wouldn't work for some reason.
I need a way to on a user hover over #box1, that all animations stop. I have tried using .clearQueue, but I couldn't get that to work.
First of all, set to your css:
.box {display: none;}
SHOW ALL BOXES ON HOVER See Demo
This will show all boxes on hover and then continue the animation from where it stopped (will hide the boxes that hadn't shown up during the animation). I think that is what you are after.
var index = 0; // To keep track of the last div showed during animation
var time_of_delay = 1000; // Set the time of delay
// Start the animation
$(document).ready(function () {
box1(time_of_delay);
});
// The hover states
$("#box1_1").hover(
function() {
box1(0);
}, function() {
box1(time_of_delay);
});
// The animation function
function box1 (delay_time) {
var time=delay_time;
if(time>0) {
$(".box").slice(index).each(function() {
$(this).hide().delay(time).show(0);
time=time+time_of_delay;
});
index=0;
} else {
$(".box:visible").each(function() {
index++;
});
$(".box").stop(true).show(0);
}
}
PAUSE ON HOVER See Demo
This will only pause the animation and continue from where it stopped.
var time_of_delay = 1000; // Set the time of delay
// Start the animation
$(document).ready(function () {
box1(time_of_delay);
});
// The hover states
$("#box1_1").hover(
function() {
box1(0);
}, function() {
box1(time_of_delay);
});
// The animation function
function box1 (delay_time) {
var time=delay_time;
if(time>0) {
$(".box:hidden").each(function() {
$(this).delay(time).show(0);
time=time+time_of_delay;
});
} else {
$(".box").stop(true);
}
}
I used setTimeout and clearTimeout and periodically call a function that increments (and resets) the box to display. Since I assign setTimout to boxt, I am able to call clearTimeout(boxt) on box1's hover event so that I can stop specifically that loop. Here's my jsfiddle. It might not be the exact effect you're trying to achieve, but it should be the right functionality and be easily adaptable with a few tweaks. Let me know if this works for you and if you have any questions about how it works :)
LIVE DEMO
var $box = $('#box1').find('.box'),
boxN = $box.length,
c = 0,
intv;
$box.eq(c).show(); // Show initially the '0' indexed .box (first one)
function loop(){
intv = setInterval(function(){
$box.eq(++c%boxN).fadeTo(400,1).siblings().fadeTo(400,0);
},1000);
}
loop(); // Start your loop
$('#box1').on('mouseenter mouseleave', function( e ){
return e.type=='mouseenter' ? (clearInterval(intv))($box.fadeTo(400,1)) : loop();
});
Where ++c%boxN will take care to loop your animation using the Modulo % (reminder) operator inside a setInterval. Than all you need to do is to register a mouseenter and mouseleave on the parent element to:
clear the Interval on mouseenter + fade all your elements
restart your loop function on mouseleave.
Here's one way to do it:
// hide all of the boxes
$('.box').hide();
// reference to each box, the current box in this list and a flag to stop the animation
var divs = box1.getElementsByClassName('box');
var i = 0;
var run = true;
// this will animate each box one after the other
function fade(){
if(i < divs.length && run){
$(divs[i++]).fadeIn(500, function(){
setTimeout(fade, 1000);
});
}
};
fade();
// stop the above function from running when the mouse enters `box1`
$('#box1').on('mouseenter', function(){console.log('enter');
run = false;
});
// start the function again from where we stopped it when the mouse leaves `box1`
$('#box1').on('mouseleave', function(){console.log('leave');
run = true;
fade();
});
Demo: http://jsfiddle.net/louisbros/dKcn5/
I am using the following script to fade an image out after 5 seconds:
var $j = jQuery.noConflict();
$j(document).ready(function() {
var fade_out = function() {
$j("#fadeout").fadeOut().empty();
}
setTimeout(fade_out, 5000);
});
When the image goes away it just disappears. I want the image to slowly fade out over a second or so. How can I do this?
Put the empty method in the fadeOut callback:
var $j = jQuery.noConflict();
$j(document).ready(function() {
var fade_out = function() {
$j("#fadeout").fadeOut(1000, function() { $j("#fadeout").empty(); });
}
setTimeout(fade_out, 5000);
});
var el = $j("#fadeout");
el.fadeOut(1000, function() { el.empty(); })
1000 is the time in milliseconds taken by the effect to complete the fadeOut
You may want to cache a reference to the element (since you need to use it twice)