Форум

didfree · #1 (**permalink**) 04.02.2013, 22:57

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

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

Только не ругайтесь))

Deff · #2 (**permalink**) 04.02.2013, 23:09

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

http://jquery-docs.ru/Effects/animate/#source

didfree · #3 (**permalink**) 04.02.2013, 23:14

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

Deff · #4 (**permalink**) 05.02.2013, 00:33

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>

рони · #5 (**permalink**) 05.02.2013, 01:10

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>

Форум

Справочник

Discord чат

Курсы javascript