Tham khảo tài liệu 'wordpress 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ả | jQuery Animation within WordPress Next up we ll move the h2 header up a bit and most importantly as our actual posts are under the positioned absolute .sticky posts we ll move those down so they show up under our soon-to-be-animated sticky posts. We ll also adjust the image s right-hand side margin a bit for placement. . move the header back over if it s 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. You can refer to Chapter 3 Digging Deeper Understanding jQuery and WordPress Together for more on using selectors if you need to refresh your knowledge. Essentially we re targeting the first .post div that does not have the .sticky class assigned to it. Nice The result looks like this 186 Chapter 5 OK jQuery has that really nice function we ve looked at previously called .each which will run additional functions on every object in a wrapper set. If all we wanted to 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 it s 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 doesn t continue. Nope there s no super slick jQuery way to keep the .each function going. Yet an .each function is so easy to set up it s a shame not to leverage them even for infinite loops . 187 jQuery Animation within WordPress Now a quick explanation here you can do a Google .
