jQuery fadeTo() THEN hide element by making it display:none?
I have 2 #header elements with different info in each that I want to fade in/out on a hover event.
I can do the fade in/out no problem BUT I really want the elements to be hidden, i.e. using "display:none;" AFTER they have faded out and开发者_Python百科 THEN bring them back once they fade in.
I have this already for the fade:
$(document).ready(function()
{
$("#header").hover
(function()
{
$(this).fadeTo("fast", 0);
$('#header_hover').fadeTo("fast", 1.0);
},
function()
{
$(this).fadeTo("fast", 1.0);
$('#header_hover').fadeTo("fast", 0); '5'});
});
});
Which works great but although this changes the 'opacity' of each item they still exist together in code, so its as if I have 2 headers which I don't want.
FYI I'm using this CSS to show one header behind the other:
#header, #header_hover
{
height:260px;
padding:0;
margin:20px 10px;
position:absolute;
top:20px;
}
#header
{
background:red;
z-index:10;
}
#header_hover
{
background:blue;
z-index:5;
}
I've tried a number of different solutions in jQuery, nothing has worked. At worst I get a crazy look at best one shows but the other is hidden forever?
You just have to show #header_hover
before fading in (normally), and hide #header
after fading out (using a callback).
$("#header").hover(function() {
$(this).fadeTo("fast", 0);
$('#header_hover').show();
$('#header_hover').fadeTo("fast", 1.0);
}, function() {
$(this).fadeTo("fast", 1.0);
$('#header_hover').fadeTo("fast", 0, function() {
$(this).hide();
});
});
Try it here (Note: The red div has less content, so you can see the effect.).
Use the animate function:
$(this).animate({opacity: 'toggle'}, 'fast');
Or the fadeIn fadeOut function:
$(this).fadeOut('fast');
something like this:
$(document).ready(function()
{
$("#header").hover
(function()
{
$(this).fadeOut("fast");
$('#header_hover').fadeIn("fast");
},
function()
{
$(this).fadeIn("fast");
$('#header_hover').fadeOut("fast"); '5'});
});
});
$(element).fadeOut("slow").hide();
AFAIK the execution flow will prevent "hide" execution before "fadeOut" ends.
精彩评论