実験室

一定時間後に消え、マウス操作で表示

サンプル

コード


<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>

© Wicker Wings, 2013

BACK