jQuery, div avanti e indietro
Plugin per far andare avanti e indietro un div in una pagina.
HTML
<!-- Primo elemento che fa avanti e indietro -->
<div class="rail">
<div id="imhappy"></div>
</div>
<!-- Un secondo, per dimostrare che si possono gestire un numero indefinito di elementi in contemporanea -->
<div class="rail">
<div id="imhappy2"></div>
</div>
CSS
.rail{
position:relative;
overflow:hidden;
height:50px;
margin-bottom:20px;
}
#imhappy, #imhappy2{
width:100px;
height:100px;
background-color:#008000;
position:absolute;
left:0px;
}
JavaScript
// Definizione del Plugin
(function($)
{
var settings;
$.fn.extend({
goAndBack: function() {
var runnerObj = this;
return {
runner: runnerObj,
settings: settings,
isStopped: false,
howToRun: function(obj) {
var self = this;
var pixelToRun = $(obj).parent().width()-$(obj).outerWidth();
var operation = $(obj).position()['left']==0? "+="+pixelToRun : "0";
$(obj).animate(
{left: operation},
this.settings.duration,
function() {
if (self.settings.callback != null)
self.settings.callback();
if (!self.isStopped)
self.howToRun(obj);
}
);
},
stop: function() {
this.isStopped = true;
},
run: function(options) {
this.settings = $.extend({
duration: 4000,
callback: null
}, options);
this.isStopped = false;
this.howToRun(this.runner);
}
};
}
});
})(jQuery);
var runner = $('#imhappy').goAndBack();
runner.run();
var runner2 = $('#imhappy2').goAndBack();
runner2.run({duration:3000});