jQuery fade-in 55 Responses

Last post: 1 year, 5 months ago | Thread started: Sep 2, 10, 12:54 a.m.

RespondNew TopicDisable Images

• Continuity

  Can any one let me know - or point me to a good tute - that would allow me to fade divs in onLoad sequentially usng jQuery? The thing is the container divs that I want to fade in all have the same class name in the CSS and mark-up, so I'm not sure how I can accomplish this.

  Thanks, Queue-Beaners.

  Sep 2, 10, 12:54 a.m. – Permalink

• ernexbcn

  that'd be three-fiddy

  • Damn you, monstah. Comin' round to mah house, askin' me fo' tree-fiddy.– Continuity

  

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

  Cancel

  Dog-earSep 2, 10, 12:56 a.m. – Permalink

• hans_glib

  my go-to jquery place:

  http://flowplayer.org/tools/

  • dunno if it's what you're after tho– hans_glib1/2

    I haven't found anything there, it was the first place I checked, too. :(– Continuity2/2

  

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

  Cancel

  Dog-earSep 2, 10, 1:05 a.m. – Permalink

• spraycanII

  use a call back

  like:

  $(div div.div_class:eq(0)).fadeIn(100, function(){
  $(div div.div_class:eq(1)).fadeIn(100, function(){
  etc...
  }
  })

  • Where eq(0) is the load order?– Continuity1/2

    Thx for this spraycan, it pointed me in the right direction.– Continuity2/2

  

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

  Cancel

  Dog-earSep 2, 10, 2:42 a.m. – Permalink

• pillhead

  JQuery Cycle Plugin is great for that.

  • I'll dig into it, thx– Continuity1/3

    ...but that's not a simple fadein. the fadeIn-function from juery is quite simpler for a simple fadein. but... there is no "onload" in jquery(?)– noel2/3

    damn. way to much simples around here– noel3/3

  

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

  Cancel

  Dog-earSep 2, 10, 2:50 a.m. – Permalink

• Continuity

  I ended up doing it like so:

  $(function(){

  var delay = 100;
  $(".folioProject").each(function...
  var fade = $(this);
  showItem(fade,delay);
  delay += 250;
  });

  });

  function showItem($o,n) {
  setTimeout(function() {
  $o.fadeIn(500);
  }, n);
  }

  

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

  Cancel

  Dog-earSep 2, 10, 6:14 a.m. – Permalink