The new version is now on GitHub and contains some significant improvements. The support for jQuery 1.3.x is now dropped in favor of the .delay()-function.

Check it out on GitHub.

• IE6 seems to go crazy with it. So I decided to remove support for all IE-browsers with version 6 and smaller – no worry, it degrades nicely.
• IE7 and IE8 of course do not support “opacity:value” in CSS. So the initial set-up with div-elements looked a bit strange. I integrated a small check with $.support.opacity on the append()-part.
• the plugin works nicely with jQuery 1.4.2 – demos are updated now.

Demos: demo1 jQuery 1.3, demo1 jQuery 1.4, demo2 jQuery 1.3, demo2 jQuery 1.4

Downloads: the minified version (2.2kb) or the full source.

btw.: I plan to publish it on the jQuery-plugins-page if I’ve rewritten the loop()-function – so maybe with version 0.4.

Let’s say you have an area in your website with some sort of “moody image”. Something that sits there pretty still and won’t change. Of course there are tons of jQuery-tools to make this a attractive spot (like cycle), but they are all a bit too much. And I found none that support slicing the image and using some sort of video-style transition. That’s where moodblender comes in.

The plugin is in it’s early stages. You should only use the settings splitparts, loop, maxloop and dwellTime. Using “blendOut: true” is fine, but does not work the way I had it in mind ;)

There are two demos available: number 1 and number 2.

Use the minified version (2.2kb) or read the full source. It’s tested with jQuery 1.3.2, but should work with the latest 1.4 as well.
Browserchecks aren’t complete yet. I’ve only tested it with Firefox 3.6, Safari 4, Google Chrome 4 and Opera 10.10. I did some tests with InternetExplorer 6 to 8, but only with an early version.

HTML

<div id="mood">
<img src="pix/mood_1_test.jpg" alt=""/>
<img src="pix/mood_3_test.jpg" alt=""/>
<img src="pix/mood_2_test.jpg" alt=""/>
</div>

CSS

#mood
{
 position:relative;
 overflow:hidden;
 width:500px;
 height:282px;
}

JS

$(document).ready(function() {
 $('#mood').moodblender({
 loop: true,
 maxloop: 10,
 blendOut: false,
 dwellTime: 3000
 });
});

I’ve a couple of things in mind for version 0.2 and beyond. Some of them are

• rewrite the loop-function and maybe make use of jQuery’s new delay()-function (sometimes looping kills itself or slices move in on one block… timing is evil in JS)
• add support for jQuery Easing Plugin
• fix the ‘blendOut: true’
• add full support for IE6 to 8 (or degrade nicely with IE6 ;)