一定時間後に消え、マウス操作で表示
<script>
(function($){
function Item(element){
this.$element = $(element);
this.isShowing = true;
this.tm = 0;
var self = this;
$(document.body).on("mousemove", self, function(){
self.show();
self.tm = setTimeout( function(){self.hide();}, 3000);
});
self.tm = setTimeout( function(){self.hide();}, 3000);
}
Item.prototype = {
show: function(){
this.stopTimer();
if( !this.isShowing ){
this.isShowing = true;
this.$element.stop().animate({'opacity': 1.0});
}
},
hide: function(){
this.stopTimer();
if ( this.isShowing ){
this.isShowing = false;
this.$element.stop().animate({'opacity': 0.0});
}
},
stopTimer: function(){
if( this.tm ){
clearTimeout(this.tm);
this.tm=0;
}
}
};
$(function($){
var item = new Item("#sample");
});
}(jQuery));
</script>