Симофорчик

Давно лежит в черновиках, и вот надумал опубликовать. Небольшой пример работы с анимацией на jquery

Все очень просто: при ошибке, например, загрузки данных с сервера вылазит маленькое окошечко с сообщением о том что произошла ошибка. Примерно так как на Хабре. Сообщение держиться 5 секунд после чего исчезает. Если на него не навести мышку, если навести то снова появляеться даже если уже наполовину исчезло. Если на него кликнуть то будет держаться пока не кликнеш еще раз. Если сообщения два второе становиться под первое. К сожелению изза дизайна сайта тут положение высчитываеться вврху экрана и если проскролить чуток то оно чуть сползет, поэтому лучше всего смотриться в абсолютным позиционированием контента. Такое позиционирование есть если для создания сраницы исользовался UI.Layout, так что нужно откорректировать top и left.


function showMessage(text, error){
	var clicked = false;
	var self = $("<div/>",{
		css:{
			width : "200px",
			height : "60px",
			background : error ? "#ED6060" : "#60ED60",
			position : "relative",
			zIndex : 10,
			textAlign : "center",
			lineHeight : "60px",
			display : "none",
		},
		text : text,
		click : function(){
			clicked = !clicked;
		},
		mouseover : function(){
			self.stop(true, true).fadeIn("slow");
		},
		mouseout : function(){
		if (!clicked){
			self.stop(true, true).fadeOut("slow").queue(function(){
				self.remove();
			});
		}
	}})
	.appendTo("body")
	.fadeIn("slow")
	.delay(5000)
	.fadeOut("slow")
	.queue(function(){
		self.remove();
	});
}

Ну и на последок как водиться примерчик.

5 Комментарии “Симофорчик

  1. надо fixed сделать для этого div
    а то крутишь страницу, а оно на месте стоит

  2. спасибо. но дело не в диве а именно в отмене анимации

    кстати наверное clicked надо было сделать через $.data

Комментарии закрыты