среда, 12 мая 2010 г.

Creeping line - my first jQuery plugin.



In my last project I had to write very simple web part control for SharePoint. It was creeping line. You have some div elements that have to go to top with animation smoothly and with some mouse events.

For your review, please, check it code:

// jquery.creeping.js

; (function($) {

var ver = "0.01";
var author = "oivoodoo";

function debug(s) {
if ($.fn.cycle.debug)
log(s);
}

function log() {
if (window.console && window.console.log)
window.console.log('[creeping] ' + Array.prototype.join.call(arguments, ' '));
};

$.fn.creeping = function(options, arg2) {
var o = { s: this.selector, c: this.context };

if (this.length === 0 && options != 'stop') {
if (!$.isReady && o.s) {
log('DOM not ready, queuing creeping line');
$(function() {
$(o.s, o.c).creeping(options, arg2);
});
return this;
}
log('terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)'));
return this;
}

return this.each(function() {
var $cont = $(this);
var $height = $cont.height();
var $iteration = 0;
$cont.parent().css('display', 'block').css('height', options.height).css('overflow', 'hidden').css('position', 'relative');
$cont.css('position', 'relative');

var maxSize = $cont.children().length * ($height - options.height);

$cont.mouseover(function() {
$cont.clearQueue().stop().delay(1500);
});
$cont.mouseout(function() {
start_animation();
});
function start_animation() {
$cont.animate({ top: '-' + maxSize +'px' }, 60000, 'linear', function() {
$cont.animate({ top: (options.height - 100) + 'px' }, 4000, 'linear', function() {
start_animation();
});
}).delay(options.delay);
};

start_animation();
});
};
})(jQuery);

Комментариев нет: