jquery fadein/out 1010 Responses

Last post: 1 year, 11 months ago | Thread started: Mar 15, 10, 6:18 p.m.

RespondNew TopicDisable Images

• 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!

  Mar 15, 10, 6:18 p.m. – Permalink

• bigtrickagain

  do you have a demo page up? it's always easier to diagnose these things with a live example to work from (:

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 15, 10, 6:32 p.m. – Permalink

• heavyt

  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?

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 15, 10, 6:42 p.m. – Permalink

• heavyt

  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

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 15, 10, 7:02 p.m. – Permalink

• Etype

  • prints not dead! it's just lost in the jquery thread...– Amicus

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 15, 10, 7:09 p.m. – Permalink

• duckseason

  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

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 16, 10, 4:41 a.m. – Permalink

• neverblink

  you don't need to change the display setting on hovering, jquery will change it for you.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 16, 10, 5:15 a.m. – Permalink

• Stugoo

  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});

  • fadeTo is better than fadeIn/Out as it can be a bit buggy on heavy rollovers.– Stugoo1/2

    you might not need that last opacity. also mys syntax might be off.– Stugoo2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 16, 10, 6:15 a.m. – Permalink

• duckseason

  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

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 16, 10, 6:35 a.m. – Permalink

• ctcliff

  Try setting up the fadeIn like this:

  $('.el')
  .queue('fx', [])
  .css({
  display: 'none',
  opacity: '1.00'
  })
  .fadeIn(1000)
  ;

  • or what Stugoo said– ctcliff

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 16, 10, 6:45 a.m. – Permalink

• duckseason

  Stugoo - worked like a charm, thank you!
  You too, ctcliff, for reinforcing his methods. ;)

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMar 16, 10, 4:56 p.m. – Permalink