Плавное появление или изменение прозрачности

Для определения прозрачности в css по логике должно служить свойство opacity (Mozilla, Opera), но разработчики IE как всегда выделились и сделали по другому. К тому же в IE не все объекты можно сделать прозрачными. Ниже приведен пример
с контейнером span, который в IE6 прозрачности не получает. Исследовать поведение других тегов в разных версиях «любимого» обозревателя, если честно, нет никакого желания.

Для установления прозрачности объекта в таблице стилей нужно писать:

opacity: 0.5;
filter: alpha(opacity=50);

Прозрачность нельзя указывать в процентах явно. Она измеряется: для IE — от 1 до 100, для других — от 0 до 1.

Следующий скрипт осуществляет плавное появление / исчезание (читай плавное изменение прозрачности) объекта:

var t,t2,obj,op;
var cm;		// для отображения процентов

function appear(x)   // x - конечное значение прозрачности
{
	op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;

	if(op < x) {
		clearTimeout(t2);
		op += 0.05;
		cm.innerHTML = Math.round(op*10)/10*100+'%'; // отображение процентов
		obj.style.opacity = op;
		obj.style.filter='alpha(opacity='+op*100+')';
		t=setTimeout('appear('+x+')',20);
	}
}

function disappear(x) {
	op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;

	if(op > x) {
		clearTimeout(t);
		op -= 0.05;
		cm.innerHTML = Math.round(op*10)/10*100+'%'; // отображение процентов
		obj.style.opacity = op;
		obj.style.filter='alpha(opacity='+op*100+')';
		t2=setTimeout('disappear('+x+')',20);
	}
}

Используя данные функции можно задать эффект появления / затухания проивольному числу элементов на странице. Для этого нужно установить у требуемых объектов соответствующие обработчики событий. При вызове функций не забываем устанавливать переменную obj, которая указывает у какого объекта будет изменяться прозрачность:

logo

Примеры:

logo
50%
logo
10%

Это пример задания прозрачности контейнера span (в IE не работает)

40%

дополнение

Один из комментариев ниже побудил меня модернизировать скрипт так, чтобы не использовать глобальные объекты. Как всегда я стараюсь быть проще, насколько это у меня получилось — судить вам…

var z;

function tst(x,x2,obj,pid)   // x - конечное значение прозрачности, x2 - начальное
{
	var t,t2;
	var cm = document.getElementById(pid);	 // для отображения процентов
	this.appear = function() {
		var op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;

		if(op < x) {
			clearTimeout(t2);
			op += 0.05;
			cm.innerHTML = Math.round(op*10)/10*100+'%';
			obj.style.opacity = op;
			obj.style.filter='alpha(opacity='+op*100+')';
			t = setTimeout(arguments.callee,50);
		}
	}
	this.disappear = function() {
		var op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;

		if(op > x2) {
			clearTimeout(t);
			op -= 0.05;
			cm.innerHTML = Math.round(op*10)/10*100+'%';
			obj.style.opacity = op;
			obj.style.filter='alpha(opacity='+op*100+')';
			t2 = setTimeout(arguments.callee,50);
		}
	}
}

Примеры:

logo
50%
logo
10%

Это пример задания прозрачности контейнера span (в IE не работает)

40%

А если использовать инопланетный framework jQuery, то можно не только избавиться от вызова обработчиков событий внутри блока, прозрачность которого нужно изменять, но и сократить код просто до безобразия:

$('img', '#jq_op')
	.each(function (){
		$(this).data('op',$(this).css('opacity'));
	})
	.mouseover(function (){
		$(this).animate({opacity: 1}, 500 );
	})
	.mouseout(function (){
		$(this).stop(true,true).animate({opacity: $(this).data('op')}, 500 );
	});
logo
logo

58 thoughts on “Плавное появление или изменение прозрачности

  1. Спасибо за пример, взял на вооружение 🙂

  2. Великолепный сайт, действительно красивые вещи и действительно просто и написаны, Молодцы создатели!

  3. Единственное разве не лучше было бы передавать объект в ф-ии appear и disappear иначе если скажем кто-то уберет курсор с 1ой вещи она начнет становится менее прозрачной какое-от время(переменная хранится в obj) но теперь юзер в тот промежуток времени пока идет disapear успевает перевести курсор на др. элемент вызвав для него appear и тогда получится что переменная obj уже будет содержать не тот объект и в результате прозрачность первого не вернется в значение по умолчанию.

  4. Согласен с предыдущим, только передавать объекты в функции setTimeout — задача не тривиальная. Возможно, в данном случае проще передавать id объекта или как описано в дополнении выше.

  5. Шикарное решение, спасибо авторам (сообщение anonymous — это тоже от меня просто задбыл имя вписать =)).Я хотел спросить а можно ли вам свои скрипты присылать, и если да — то как это делать.С Уважением Zmi

  6. Присылать скрипты можно, пока на мыло admin[dog]easywebscripts.net, и, если они будут соответствовать тематике проекта, я с радостью опубликую их, естественно, с указанием автора и ссылки на его проект (если имеется)

  7. Эххх замечательный сайт =)Кстати к делу конешно не относится и после написания такой красотульки как это появление но все же неплохо дополнить было бы ф-ей для начального задания прозрачности например такойfunction StartAppear(obj,x){ obj.style.opacity = x; obj.style.filter=

  8. Блин жаль вырезало… сообщение — в связи с этим вопрос а как мне написать сообщение что бы оно нормально долшо без вырезаных тегов а скажем просто проэкранировалось как-нибудь.

  9. ещё одно узкое место — если человек увёл курсор с объекта, а потом снова поставил на него — получаем зацикливание
    я решил сохранением в глобальную переменную текущей появляющейся картинки, и текущей исчезающей и явно отслеживающую ситуации равенства этих переменных

  10. Что -то у меня не получилось((( картинка статическая и не меняет свою прозрачность( помогите может что не так сделал

  11. Сайт супер! Побольше таких!!! Автору огромный респек!!!!

  12. Спасибо за помощь! Ваши статьи сильно помогли!

  13. Что мне нравится в этом ресурсе- это его индивидуальность. Автор явный приверженец всего красивого, элегантного, а главное простого. За что ему отдельный респект и спасибо.

  14. У меня тоже не заработало, беру первый пример, ничего не получается
    (((((

  15. to Ардрей: проверяйте, потому что на этой странице работает именно представленный код, можете посмотреть в исходном коде странице (простите за тавтологию)

  16. Уважаемый автор, приношу извинения если оффтоп, но все же. Как Вы наверника заметили жалобы на невозможность реализовать скрипт на своей странице озвучили несколько человек. Не могли бы Вы детально начиная с <script type="text… привести пример реализации opacity с использованием библиотеки jQuery. Оправдайте название сайта. Заранее спасибо.

  17. Уважаемые читатели данной статьи, у которых не получается использовать скрипт! На данной странице все прекрасно работает, значит скрипт 100% рабочий и утверждения типа "Ни фига не работает" не корректны! Наиболее подробное описание работы скрипта вы можете получить посмотрев в исходный код данной страницы, т.е. разобрав рабочий пример. В нем вы увидите eval($('#c3').text()); т.е. выполняется только то, что видно в блоках кода на странице, не больше, не меньше, никаких "скрытых" действий не производится. Как описать более детально функцию, занимающую 10 строчек кода, я просто не представляю …

  18. А реально такой эффект сделать при загрузке страницы на всю страницу, а не на отдельный объект?

  19. конечно реально, причем можно менять прозрачность не каждого элемента на странице, что довольно друдозатратно для браузера, а сделать overlay слой, покрывающий всю страницу, который будет плавно затухать при загрузке

  20. Этот эффект хорошо бы добавить в "менюху наверху".

  21. Этот эффект хорошо бы добавить в "менюху наверху".

  22. Пытался повторить пример. Столкнулся с одной странностью. Если свойства стиля задавать в таблице стилей в заголовке, а потом применять к объектам через id или class — то JS значение этого свойства не увидит, но стиль к объекту применится. alert(document.getElementById("id").style.opacity — пустота, хотя в самом объекте есть св-во .style = [object CSSStyleDeclaration] где эти стили по идее должны храниться. И они там появляются, если задать opacity в JS явно или сделать атрибут style у тега и прописать свойства там. Может поэтому у многих и не работает этот script. Хотелось бы еще понять почему CSS-стили себя так ведут и как их полечить от этого. У меня Firefox 3.0.13. Смотрел еще в IE6 — тот же дефект. Может какие-то настройки есть волшебные?

  23. Здавствуйте, у меня вопрос, я сделал java-окно при нажатии на кнопку, оно моментально появляется, а иногда появляется без каких-то элементов к примеру угла от таблицы контента окна, помогите написать скрип желательно на javascript можно затрагивающий css, чтобы при нажатии на ту же кнопку, сначала окно плавно появлялось, а в центре пока не загрузиться была к примеру аниминрованная картинка (img.gif), ну и так же окно затухало при выключении его… Буду очень благодарен icq 9-520-720

  24. А не идёт то всё потому что d.getElementById в скриптах нужнро изменить в document.getElementById !!!!!!!!!! в файле all.js этого сайта d=document !!!!

  25. сохранил эту страницу на свой компьютер со всеми скриптами и графикой. открываю у себя в мозиле, не работает только пример про jquery что может быть не так?

  26. Скрипт не работает из-за строчки отображение процентов. cm надо определить для начала: cm = document.getElementById(''); это для тех у кого скрипт не пашет на своем компе.

  27. снова же вопрос по скрипту — если навел человек на картинку, а потом резко убрал и снова навел — получается зацикливание. как убрать?

  28. ну а скорее не убрать, а обнулить. чтобы при любом обстоятельстве пользователь вновь получал затухание сначала, а не с того момента, на котором остановился

  29. Благодаря вашим примерам я написал свои кроссбраузерные функции. Огромное спасибо! Вам следует поработать надкроссбраузерностью ваших функций.

  30. Давайте разъясним поэтапно установку. 1) В css изображениям задаем opacity: 0.5; filter: alpha(opacity=50); 2) к изображению добавляем onmouseover="obj=this; appear(1);" onmouseout="disappear(0.5);" 3) блоку, в котором содержится изображение дописываем id="jq_op" 4) В тело сайта вставляем jQuery скрипт. На этом все. Я прав?

  31. Все пишут только хорошие отзывы, а кто-нибудь проверял работу данного скрипта в ИЕ (6,7,8) ???

  32. скрипты не работаю в ие 6-8 причина: op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100; 1, Вы пытаетесь получить значения style который не существует как атрибут, скрипт безусловно работает если этот атрибут присутствует у узла. 2, style.filter — и что Вы получите???????

  33. Я извиняюсь, но не могли бы вы подробней объяснить реализацию на jquery?

  34. >Для установления прозрачности объекта в таблице стилей нужно >писать: >view source >1opacity: 0.5; >2filter: alpha(opacity=50); Не просто писать, а установить через javascript: document.getElementById('class_style').style.opacity = 1; , ибо иначе значение opacity равно Nan.

  35. на jQuery это можно решить еще проще.. $(this).mouseover(function(){ $(this).fadeTo(250, 0.5); }).mouseout(function(){$(this).fadeTo(250, 1);});

  36. У меня получилось: 1) Скачал скрипт jQuery на сайт 2) Вбил код в script: $("#img1").mouseenter(function(){ $("#img1").animate({opacity: 1}, 1000); }); $("#img1").mouseout(function(){ $("#img1").animate({opacity: 0.4}, 1000); });

  37. Спасибо за скрипт. Такой вопрос: можно ли начальное значение style="opacity: 0,5;" подхватывать из внешнего CSS? На что надо при этом заменить obj.style.opacity?

  38. тому кто тут писал про jQuery хочу напомнить, что его не всегда можно использовать вот 2 основных причины: 1. коммерческая цена 2. ваш код может работать (точнее, НЕ работать) на стороне клиента. например, как всегде, конфликты с клиентскими библиотеками.

  39. To Franky: Чтобы считать стиль из CSS попробуйте так: x=obj.currentStyle.opacity

  40. Я конечно ничего не хоч сказать против — ресурс сделан красиво и кнопочки становятся прозрачными у Автора,но я вот например голову сломал, потому что у меня Не получилось. Но вся соль не в этом — я перелопатил весь проект автора и не нашёл оригинального исполнения, чтобы сравнить, только то, как события прописаны к картинкам. Я всё понимаю и все подобные приёмы видел, правда в других языках программирования, поэтому прошу не принижать мой опыт — здесь же очевидным образом не хватает какой-то строчки, благодаря которой всё в конечном итоге заработает, либо какой-то настройки браузера. Догадок могу предложить множество, но всё равно не работает.

  41. Ищящий да обрящет. Не прошло и 5ти минут, после написания гневного поста, как я , методом естественно проб и ошибок, нашёл косяк… причём считаю что абсолютно прав в данной ситуации. Суть ошибки в том, что указание свойства Opacity в таблице стилей фактически стопорит любые действия по динамическому изменению. Автор же в строке "<img src="img/logo.png" width="98" height="130" alt="logo" onmouseover="obj=this; appear(1);" onmouseout="disappear(0.5);">" как бы случайно забывает про добавочное свойство, которое вроде бы и не важно, но присутствует в коде страницы " style = "opacity : 0.5;" ". Конечно же не важно — я убил 3 часа на 1 строчку. Автору конечно спасибо, но нервы не вернёшь. Ещё раз — таблицы стилей работают, но без указания в самом элементе свойства Opacity ничего не работает!

  42. Пробовал на самопальном хостинге, совместно со скриптом хостинга картинок. Всё сделал как в примере, заработало, но криво. Кривость проявляется в этом: Когда наводим курсор на картинку — эффект происходит… Но тут же обраывается. Т.е. обратно opacity от 1 к 0.5 переходит не плавно, а резко(пробовал первые два скрипта, jQuery не использую по некоторым причинам). Возможно конечно, что конфликт есть между другими скриптами(пишу фото-галерею), но это маловероятно. Проверял в опере 11. И Mozilla(какая там недавно вышла, я не в курсе :D). в чём ошибка — понять не могу… =

  43. 2 Bimmy: Перечитайте предыдущий пост. Важно задать элементу первоначальную прозрачность. IE криво обрабатывает прозрачность из таблицы стилей. Например, <img onmouseout="z.disappear();" onmouseover="z = new tst(1,.65,this); z.appear();" src="myimage.png" style="opacity: 0.65;"> В таблицах стилей так же добавить: img { -moz-opacity: 0.65; -khtml-opacity: 0.65; filter:alpha(opacity=65); min-width: 1%; min-height: 1%; display: block; } Задание размеров для прозрачности обязательно, но для того, что бы это не делать постоянно можно в стилях задать минимальный размер, а далее картинка растянется до своих 100%. Все роде бы красиво и радужно: можно пить шампанское… Но есть у вас картинок десять и более, прописывать каждой ручками это 🙁 Копи-паст? Визуально захламляет код для дальнейшего редактирования. А если нужно изменить прозрачность для всех элементов? Опа 🙂

  44. Я с javascript знаком "без году 5 минут", но кое-чего на этот счет написал. <script type="text/javascript"> function AI() { var Imgs=document.getElementById("images"); var c = Imgs.childNodes.length — 1; var i = 0; for (i=0;i<=c;i++) { obj=document.getElementsByTagName("img")[i]; obj.setAttribute("onmouseout","z.disappear();"); obj.setAttribute("onmouseover","z = new tst(1,.65,this); z.appear();"); obj.setAttribute("style","opacity: 0.65;"); } } </script> … <body onload="AI()"> … <div id ="images"> <img scr=""><img scr=""><img scr=""><img scr="">… </div> Объясню. 1. Добавляем в "body" событие onload="AI()" 2. Создаем блок (либо другой элемент) и присваиваем ему id. 3. Размещаем по своему усмотрению в вышеупомянутом блоке нужное количество картинок. 4. Добавляем между тегами <head> и </head> выложенный скрипт. 5. Тут только остается указать коэффициенты прозрачности и проверить что вышло 🙂

  45. Статья не работает в обще то надо выкладывать исходники.Потерял зря своё время

  46. ИМХО первый скрипт самый адекватный Второй скрипт, если несколько раз быстро навести/убрать курсор зависает и анимация останавливается. Третий скрипт если быстро навести и убрать курсор начинает проигрывать обратную анимацию с яркости в 100% а не с той которая в момент убирания курсора.

  47. Как сделать что бы opacity от 0 до 1 овеличивался шагами 0,1 и обратно уменьшал и что бы это было в цикле а ни при наведении

  48. Что то у меня не заработал примерчик

  49. Нельзя ли дать ссылку на архив с рабочим примером((?

  50. Привет! Возможно, у некоторых людей не работает данный пример, потому что автор не приписал к <img … тег, с id=p1. Как оказалось, добавление данной строки сделало пример рабочим. Спасибо, хорошая статья.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *