Solving Blogger's Issues With jQuery!

Amazon If you use Google's Blogger and you are using jQuery Javascript library to achieve cool image effects, you may run into the following issue. Let's see what it is and how to solve it!

Problem
I am using jQuery Cycle plugin. How come when I do the "fade" effect (or any effect at all) there's a long delay between two sequential images? One image is supposed to fade out as the next one starts to fade in, thereby creating a non-stop visual effect.

Solution
The editor you are using in Google Blogger is probably inserting HTML line breaks for each new line You do NOT want any line breaks in the div block that encloses the images you are fading in and out. It'll break the Cycle plugin where the fading effect is gone. For example the div block may look like the following:

<div id="slideshow">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
</div>
You want to make sure there is no <br/> inside this div block. Simple use the following div instead:

<div id="slideshow"><img src="image1.jpg" /><img src="image2.jpg" /><img src="image3.jpg" /></div>
Then you should be good to go.

Another solution is to select the "Use <br/> tags" radio button in  your Post Options located near the editor. But then you'll have to explicitly put <br/> wherever you want breaklines, which is a bit of a hassle.

If this doesn't solve your problem, monitor the fading action in Firebug and see if the "opacity" attribute of each image is being dynamically incrementally changed from 0 to 1. This issue is caused by the opacity attribute not changed incrementally, and therefore an image either shows up completely or disappears completely.

If you have any questions let me know and I will do my best to help you!