www.webdeveloper.com
Results 1 to 3 of 3

Thread: understanding crossfading effect

  1. #1
    Join Date
    Feb 2011
    Location
    London
    Posts
    62

    understanding crossfading effect

    HI there, I wonder if anybody could help me to understand correctly the jquery code for crossfading effects, quite a neat effect actually http://www.simonbattersby.com/blog/s...age-crossfade/
    I had some trouble understanding the css but I was kindly helped http://webdeveloper.com/forum/showth...=1#post1192483 so that's sorted.
    Back to the javascript.
    Couple of things in this code that are a bit new and somewhat odd to me:
    Code:
    function cycleImages(){
          var $active = $('#portfolio_cycler .active');
          var $next = ($('#portfolio_cycler .active').next().length > 0) ? $('#portfolio_cycler .active').next() : $('#portfolio_cycler img:first');
          $next.css('z-index',2);//move the next image up the pile
    	  $active.fadeOut(1500,function(){//fade out the top image
    	  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
          });
        }
    
    $(document).ready(function(){
    // run every 7s
    setInterval('cycleImages()', 7000);
    })
    I need to say I am at the beginning of my jquery learning sessions, so sorry if I ask obvious questions.
    Take this line:
    Code:
    var $active = $('#portfolio_cycler .active');
    1)First and foremost, why there is a $ before the name of the variable? I thought that a variable is declared and assigned a value in this fashion
    Code:
    var var_name = ...
    . Is
    Code:
    var $var_name = ...
    the same?
    2)Then still the first line, this bit
    Code:
    $('#portfolio_cycler .active')
    I haven't come across this syntax before. Is this selector selecting a div with an id of portfolio_cycler but what's that class active doing there?! Does it mean that we are selcting only portfolio_cycler with a class of active? SOrry I am a bit confused by that.
    Moving on this line:
    Code:
    var $next = ($('#portfolio_cycler .active').next().length > 0) ? $('#portfolio_cycler .active').next() : $('#portfolio_cycler img:first');
    . IS this to say that if the next element in the portfolio_cycler is bigger than zero - meaning it is not the first image - then the variable next is equal to the next image otherwise it is the first image

    Next one:
    Code:
    $active.css('z-index',1).show().removeClass('active');
    WHy are we using the method show() in here why do we want to make the precedent image visible is it has been replace by the following one?

    Hope somebody can give me a hand, thanks

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    So first, off, in case you weren't aware, this JavaScript code uses the jQuery library which allows you to retrieve and manipulate DOM elements using a much more palatable syntax than native JavaScript code. Check out the docs on http://api.jquery.com/ to find out all about the DOM manipulation methods that jQuery exposes.

    As for your questions:

    1) $ is just a character like X or _ so it can start a JavaScript variable name. Some developers use $ in front of JavaScript variables that are supposed to contain jQuery objects

    2) As you'll read in jQuery's API $('#portfolio_cycler .active') gets any element with a class name of active that is a descendant of an element with an id of portfolio_cycler.

    In my opinion, $('#portfolio_cycler .active') is not a good way to get the element because jQuery's sizzle engine parses the selector right to left. So the first thing it does, is grab EVERY ELEMENT on the page and filter out all the ones that don't have a class of active. Once the engine has an element or elements it then has to go through every ancestor of that element until it finds one with an id of portfolio_cycler or it hits the document root, at which point that element is excluded.

    A much more efficient selector would be:

    Code:
    $('#portfolio_cycler').children('img.active')
    
    //or, in the case of the HTML code that has been referenced the following is good enough
    $('#portfolio_cycler').children('.active')
    //this is because all of the children of #portfolio_cycler are img's anyway
    This would firstly go right to a native JavaScript DOM method (getElementById) to grab #portfolio_cycler and then look at it's children that are img tags and grab the element(s) that have a class of active.

    The way the image slider you referenced works is that it FADES OUT the top image, it doesn't fade in the next one. So basically, it z-indexes the images so that the current one is at the highest level and then, when it needs to move to the next image, it just fades out the current one (revealing the next image underneath it).
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Feb 2011
    Location
    London
    Posts
    62
    thanks, it is much clearer now!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles