Помогите с небольшим эффектом на JS. При наведении курсора..
Никогда не работал с JS и времени пока нет, но очень нужно сделать одну вещь на JS.
Есть темная картинка и такая же, но светлая. Нужно сделать чтобы при наведении на темную картинку она плавно переходила в светлую. Как такое можно реализовать в JS? Заранее спасибо. |
я знаю, что можно на CSS. но мне надо, чтобы это было плавно, красиво :)
|
bayanruby,
<style>
.image.UP,
.image.Down {
border:2px solid transparent;
margin:0;
padding:0;
}
.image.UP{
opacity:1.0;
display:block;
position:absolute;z-index:100;
opacity:1.0;
transition-duration: 0.66s;
-webkit-transition-duration: 0.66s;
-moz-transition-duration: 0.66s;
-o-transition-duration: 0.66s;
}
.image.UP:hover {
opacity:0.00;
transition-duration: 0.66s;
-webkit-transition-duration: 0.66s;
-moz-transition-duration: 0.66s;
-o-transition-duration: 0.66s;
}
div.ImgWrap{
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
</style>
<div class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/><img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/><br />
</div>
|
Deff, неплохо, а как с кроссбраузерностью?
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#pic1 { background:#333333; width:95px; height:37px; z-index:1; position:absolute;opacity:1 }
#pic1:hover{opacity:0;transition-duration: 0.5s;-webkit-transition-duration: 0.66s;
-moz-transition-duration: 0.66s;-o-transition-duration: 0.66s;}
#pic2{ z-index:1; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ Без Имени</title>
</head>
<body>
<img src="http://yandex.st/lego/_/X31pO5JJJKEifJ7sfvuf3mGeD_8.png" id="pic2" />
<img src="http://www.elogo.ru/gifs/Y/yandex_logo.gif" id="pic1" />
</body>
</html>
|
Deff,
Вы ms (префикс) забыли |
Раед,
:-? А чо эт такое, просто от сохи - в терминах не оч. силён, (*Ткните пальцем |
frant32,
Прост делал - дабы анимировалось и при наводке, и при отведении мыши, хотя на мелких картинка(судя по Вашей) не сильно мешает, но на крупных будет эффект схлопывания |
Deff,
<style>
.image.UP,
.image.Down {
border:2px solid transparent;
margin:0;
padding:0;
}
.image.UP{
opacity:1.0;
display:block;
position:absolute;z-index:100;
opacity:1.0;
transition-duration: 0.66s;
-webkit-transition-duration: 0.66s;
-moz-transition-duration: 0.66s;
-o-transition-duration: 0.66s;
*!*-ms-transition-duration: 0.66s;*/!* /* IE9+ */
}
.image.UP:hover {
opacity:0.00;
transition-duration: 0.66s;
-webkit-transition-duration: 0.66s;
-moz-transition-duration: 0.66s;
-o-transition-duration: 0.66s;
*!*-ms-transition-duration: 0.66s;*/!* /* IE9+ */
}
div.ImgWrap{
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
</style>
<div class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/><img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/><br />
</div>
|
Цитата:
Но ТС то задал Нужно сделать чтобы при наведении на темную картинку она плавно переходила в светлую. Не стал заморачиватся на обратном))) хотя +3 строчки ради большего эффекта - ничто... |
| Часовой пояс GMT +3, время: 17:33. |