Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.02.2013, 20:57
Интересующийся
Отправить личное сообщение для didfree Посмотреть профиль Найти все сообщения от didfree
 
Регистрация: 02.05.2012
Сообщений: 10

Плавное изменение
Здравствуйте!
Подскажите пожалуйста, как сделать плавное изменение стиля css.

$("#knopka_mail").mouseover(function(){
$('#soc1').css("background-color","#10477D");
});


Только не ругайтесь))
Ответить с цитированием
  #2 (permalink)  
Старый 04.02.2013, 21:09
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

$('#soc1').animate({"background-color":"#10477D"}, "slow");

http://jquery-docs.ru/Effects/animate/#source
Ответить с цитированием
  #3 (permalink)  
Старый 04.02.2013, 21:14
Интересующийся
Отправить личное сообщение для didfree Посмотреть профиль Найти все сообщения от didfree
 
Регистрация: 02.05.2012
Сообщений: 10

Так в документации пишется что в animate backgroundColor не поддерживается.

Последний раз редактировалось didfree, 04.02.2013 в 21:56.
Ответить с цитированием
  #4 (permalink)  
Старый 04.02.2013, 22:33
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

didfree,
Тогда вариант таков:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
  $("#soc1").mouseenter(function(){
      $('#soc1').prev().stop().animate({"opacity":0}, "slow");
  }).mouseleave(function(){
      $('#soc1').prev().stop().animate({"opacity":1}, "slow");
  });
});
</script>




<div class=Wrap style="width:200px;position:relative;border:red solid 2px;">
  <div style="position:absolute;background-color:#10477D;width:100%;height:100%" /></div>
      <div id="soc1" style="position:relative;z-index:2;width:200px;height:100px;color:#fff;text-shadow:#000 1px 1px 2px">
            Наш объект, Наводить сюда!
      </div>
</div>

Последний раз редактировалось Deff, 05.02.2013 в 00:50.
Ответить с цитированием
  #5 (permalink)  
Старый 04.02.2013, 23:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,773

didfree,
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
</head>
<body>
<script>
function go()
{
var  t=Math.ceil(Math.random()*16777214)
jQuery("body").animate({
      backgroundColor: "#"+t.toString(16)
  }, 1500, go );
}
go()
</script>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
плавное изменение размеров div dimon76 Элементы интерфейса 9 07.11.2011 11:28
плавное изменение размера блока alexk984 jQuery 4 29.11.2010 07:46
Как сделать плавное изменение размеров контейнеров при смене AJAX-содержимого Nominus umbra Общие вопросы Javascript 3 27.01.2010 12:32
Плавное изменение ширины ячейки в таблице fed0R Элементы интерфейса 4 29.07.2009 11:50
Плавное изменение alpha Vladislav0 Элементы интерфейса 16 22.11.2008 11:33