Wordpress 3.0 jQuery - part 21

Tham khảo tài liệu wordpress 3.0 jquery - part 21, công nghệ thông tin, đồ họa - thiết kế - flash phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
Wordpress 3.0 jQuery - part 21jQuery Animation within WordPressNext up, well move the h2 header up a bit and most importantly, as our actual postsare under the positioned absolute .sticky posts, well move those down so theyshow up under our soon-to-be-animated sticky posts. Well also adjust the imagesright-hand side margin a bit for placement. ... //move the header back over if its affected by the css //you could also do this in the CSS directly jQuery(.sticky h2).css({margin: 0, padding: 0}); //move the margin over a bit //you could also do this in the CSS directly jQuery(.sticky img).css(marginRight,30px); //this pushes the other posts down out of the way jQuery(.post:not(.sticky):first).css(margin-top,360px); ...Pay special attention to the bold jQuery selector in the previous code snippet. Youcan refer to Chapter 3, Digging Deeper: Understanding jQuery and WordPress Togetherfor more on using selectors if you need to refresh your knowledge. Essentially, weretargeting the first .post div that does not have the .sticky class assigned to it. Nice!The result looks like this: [ 186 ] Chapter 5OK! jQuery has that really nice function weve looked at previously called .each,which will run additional functions on every object in a wrapper set. If all we wantedto do was run through each item one time, we could use this bit of code: ... jQuery(.sticky) .hide()/*hide each post*/ .each( function (i){ /*i = numeric value that will increase with each loop*/ jQuery(this) /*make sure each div is on its own z-index*/ .css(z-index,i+10) //using the animate function to fade in each div //3 seconds apart*/ .animate({backgroundColor: #000000}, i*3000, function(){ /*actual div fade in*/ jQuery(this).fadeIn(slow); } );//end animate });//end each ...This looks good! However, once the last div has faded in, it stops and doesnt continue.Nope, theres no super slick jQuery way to keep the .each() function going. Yet,an .each function is so easy to set up, its a shame not to leverage them, even forinfinite loops. [ 187 ]jQuery Animation within WordPressNow, a quick explanation here: you can do a Google search for infiniteanimation loops jquery, if you dare, and see that for all ten-thousand-someresults, there appears to be about that many ways JavaScript developers like to setup repeating, or infinite loops, and each developer seems to feel (of course!) that theirmethod is the best method available. My preference is to resort to regular JavaScript,and use a setInterval function and some custom variables set up in a way thatmakes it very easy to leverage my existing jQuery .each() statement and functions.To get started creating our loop, well take our existing jQuery statement and place itinside its own function. Youll need to make sure this function is outside your mainjQuery(function(){... document ready function. Otherwise, the setIntervalfunction will not launch it properly.Lets call our new function loopStickies. Youll find it familiar, aside from thefirst statement: ... function loopStickies(duration){ /*note the variable duration being passed*/ ///well need to make sure everything fades out //except the first sticky post*/ jQuery(.sticky:not(:first)).fadeOut(); /*this should look almost the same*/ jQuery(.sticky) .each( function (i){ /*i = numeric value that will increase with each loop*/ jQuery(this) /*make sure each div is on its own z-index*/ .css(z-index,i+10) /*using the animate function & duration var for timing*/ .animate({backgroundColor: #000000}, i*duration, function(){ jQuery(this).fadeIn(slow); } );//end animate }); //end each }//end loopStickies [ 188 ] Chapter 5OK, thats just the start, now that we have our loopStickies function, locatedoutside the jQuery document ready function, lets place the rest of our code, backinside the jQuery(function(){... document ready function. Follow along withthe comments in bold: ... /*set the stickies in a wrapper set to overflow hidden*/ jQuery(.sticky).wrapAll(); //make sure the first .sticky post fades in: jQuery(.sticky:first).fadeIn(); //set the duration length to 6 seconds for each slide: //(this is the var our function uses) var duration = 6000; /*create the interval duration length, based on the duration:*/ var intervalDuration = duration * jQuery(.sticky).length; /*the function needs to run once before the setInterval kicks in*/ loopStickies(duration); //the setInterval will kick off loopStickies in //18 seconds: (6secs x number of sticky posts) */ setInterval( loopStickies(+duration+), intervalDuration ); ...The way this works is, our original jQuery statement and .each() function runsthrough each sticky post in the jQuery selection by evoking the loopStickiesfunction. At the same time, the setInterval function is kicked off, but because wehave the intervalDuration variable set to calculate our duration variable timesthe number of sticky posts, its not going to kick off for 18 seconds. Just in time forour original functio ...