Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.05.2012, 15:21
Интересующийся
Отправить личное сообщение для bayanruby Посмотреть профиль Найти все сообщения от bayanruby
 
Регистрация: 26.05.2012
Сообщений: 16

Помогите с небольшим эффектом на JS. При наведении курсора..
Никогда не работал с JS и времени пока нет, но очень нужно сделать одну вещь на JS.

Есть темная картинка и такая же, но светлая. Нужно сделать чтобы при наведении на темную картинку она плавно переходила в светлую. Как такое можно реализовать в JS?

Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 26.05.2012, 15:46
Интересующийся
Отправить личное сообщение для bayanruby Посмотреть профиль Найти все сообщения от bayanruby
 
Регистрация: 26.05.2012
Сообщений: 16

я знаю, что можно на CSS. но мне надо, чтобы это было плавно, красиво
Ответить с цитированием
  #3 (permalink)  
Старый 26.05.2012, 16:36
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

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>
Ответить с цитированием
  #4 (permalink)  
Старый 26.05.2012, 16:44
Интересующийся
Отправить личное сообщение для bayanruby Посмотреть профиль Найти все сообщения от bayanruby
 
Регистрация: 26.05.2012
Сообщений: 16

Deff, неплохо, а как с кроссбраузерностью?
Ответить с цитированием
  #5 (permalink)  
Старый 26.05.2012, 22:53
Аспирант
Отправить личное сообщение для frant32 Посмотреть профиль Найти все сообщения от frant32
 
Регистрация: 03.02.2012
Сообщений: 67

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

Последний раз редактировалось frant32, 26.05.2012 в 23:10.
Ответить с цитированием
  #6 (permalink)  
Старый 27.05.2012, 00:15
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Deff,
Вы ms (префикс) забыли
Ответить с цитированием
  #7 (permalink)  
Старый 27.05.2012, 00:51
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Раед,
А чо эт такое, просто от сохи - в терминах не оч. силён, (*Ткните пальцем
Ответить с цитированием
  #8 (permalink)  
Старый 27.05.2012, 00:55
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

frant32,
Прост делал - дабы анимировалось и при наводке, и при отведении мыши,
хотя на мелких картинка(судя по Вашей) не сильно мешает, но на крупных будет эффект схлопывания
Ответить с цитированием
  #9 (permalink)  
Старый 27.05.2012, 00:56
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

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>
Ответить с цитированием
  #10 (permalink)  
Старый 27.05.2012, 01:07
Аспирант
Отправить личное сообщение для frant32 Посмотреть профиль Найти все сообщения от frant32
 
Регистрация: 03.02.2012
Сообщений: 67

Сообщение от Deff Посмотреть сообщение
frant32,
Прост делал - дабы анимировалось и при наводке, и при отведении мыши,
хотя на мелких картинка(судя по Вашей) не сильно мешает, но на крупных будет эффект схлопывания
Да на мелкой не заметно )))
Но ТС то задал Нужно сделать чтобы при наведении на темную картинку она плавно переходила в светлую.

Не стал заморачиватся на обратном))) хотя +3 строчки ради большего эффекта - ничто...

Последний раз редактировалось frant32, 27.05.2012 в 01:15.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
"Защита от дурака" при многократном наведении курсора мыши на картинку Trish jQuery 4 13.02.2012 17:07
При наведении на ссылку меняется картинка ucoz (jquery) pelimeshki jQuery 2 12.01.2012 23:53
Срабатывание ссылок при наведении. progressive jQuery 0 21.12.2010 14:40
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 19:48
ПОМОГИТЕ !!! Активные пункты меню при наведении на ссылку Salo jQuery 4 08.12.2010 11:49