Плавное изменение прозрачности картинки
Предлагаем Вашему вниманию скрипт плавного проявления картинки (изменения прозрачности изображения) при наведении на нее курсора мышки.
При наведении курсора мышки на изображение, картинка постепенно проявляется, а когда отводим курсор мышки - постепенно угасает. Получается очень красивый эффект постепенного проявления и угасания.
Чтобы понять как работает предлагаемый нами скрипт, наведите курсор мышки на одно из изображений, расположенных ниже:
Обычная картинка (прозрачность 0%) |
Прозрачность 50% | Прозрачность 90% | Пример прозрачности контейнера SPAN |
100% |
50% |
10% |
В IE данный пример с контейнером SPAN не работает! 40% |
Для получения эффекта плавного изменения прозрачности картинки, поместите JavaScript код, приведенный ниже, в начало Вашей странички:
<script type="text/javascript">
var t, t2, op, proc;
function transparent(x, x2, obj, pid) {
var proc = 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;
proc.innerHTML = Math.round(op*10)*10 + "%";
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;
proc.innerHTML = Math.round(op*10)*10 + "%";
obj.style.opacity = op;
obj.style.filter = "alpha(opacity=" + op*100 + ")";
t2 = setTimeout(arguments.callee, 50);
}
}
}
</script>
Изображения, прозрачность которых необходимо изменять, описываем следующим образом:
<img src="image/transparent.gif" width="150" alt="logo" id="image_2"
onmouseover="z = new transparent(1,0.1,this,'p5'); z.appear();"
onmouseout="z.disappear();">
<br><br>
<b id="p5">10%</b>
И в конце странички (после вывода картинок с эффектом плавного изменения прозрачности) необходимо задать начальное значение прозрачности для каждого изображения или текстового блока в отдельности. Делается это следующим образом:
<script type="text/javascript">
document.getElementById("image_1").style.opacity = 0.5;
document.getElementById("image_1").style.filter = "alpha(opacity=50)";
document.getElementById("span_5").style.opacity = 0.4;
document.getElementById("span_5").style.filter = "alpha(opacity=40)";
</script>
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
$(function() {$("#logo").animate({opacity: .7}, 5000, function() {});});
А при наведении хотел бы opacity: 1, css понятно, хотел бы данный момент на jQuery реализовать с вашей помощью.
$('#logo').hover(
function(){ $(this).animate({opacity: .7},2000); },
function(){ $(this).animate({opacity: 1},2000); });
});