Blogger's Issues With jQuery

If you use Google's Blogger and you are using jQuery to achieve cool image effects, you may run into the following issues. Here are some of them and their proposed solutions

Question: 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.

Answer: The editor you are using in 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/> in 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 way is to pick the "Use <br/> tags" radio button in  your Post Options located right below the editor. 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 updated from 0 to 1. This issue is caused by the opacity attribute not updated incrementally, and therefore an image either shows up completely or disappears completely.