jquery fadein/out
- Started
- Last post
- 10 Responses
- duckseason
So I'm trying to do something which I figured was pretty simple, and for the most part, it is.
There is only one thing that is throwing a stick in my wheels.
I am using jquery to do a fadeIn/Out hover effect on a div, this is the snippet of code I am using:
$(".navblock").hover(
function () {
$(".infooverlay",this).fadeIn("f...
},
function () {
$(".infooverlay",this).fadeOut...
}
);When .navblock is hovered over for the first time, the overlay just appears, it doesn't fade in; however once I mouse out and any time I mouse over it again, it fades in and out as normal.
Mind you, I'm JS retarded, and am trying to just follow along with tutorials, is there a reason why it's not fading in on the first mouse over?
Many thanks in advance!
- bigtrickagain0
do you have a demo page up? it's always easier to diagnose these things with a live example to work from (:
- heavyt0
do you have it setup to show on hover as well?
for instance, you have a display:none on it, but then you have a css rule that display:block when you hover?
- heavyt0
also - i think you actually need to use visible:hidden on that element rather than display:none if you want it to fade in. I think the display:none would cause it to show() rather than fading in
- ********0
- prints not dead! it's just lost in the jquery thread...Amicus
- duckseason0
No demo up yet, I really just started plugging away at this for a little bit last night.
I do have it to display: block when hovering
I will try out switching it to visible: hidden when I get back home - currently using display: none
- neverblink0
you don't need to change the display setting on hovering, jquery will change it for you.
- Stugoo0
sounds like teh element is toggling a show hide to start with.
I would chain it like this:
$(".infooverlay")
.stop()
.css( { 'display': 'block, opacity : 0} )
.fadeTo(400, 1 );then out
$(".infooverlay")
.hide()
.css({ 'display' : 'none, opacity : 0});
- duckseason0
hmmm...
although my files are at home, i'll try and recreate this portion of what i had once i get to the other job, so longs as things aren't too crazy there.i appreciate all the help/suggestions thus far
- ctcliff0
Try setting up the fadeIn like this:
$('.el')
.queue('fx', [])
.css({
display: 'none',
opacity: '1.00'
})
.fadeIn(1000)
;
- duckseason0
Stugoo - worked like a charm, thank you!
You too, ctcliff, for reinforcing his methods. ;)