Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Плавное изменение (https://javascript.ru/forum/misc/35244-plavnoe-izmenenie.html)

didfree 04.02.2013 22:57

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

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


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

Deff 04.02.2013 23:09

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

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

didfree 04.02.2013 23:14

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

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

рони 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>


Часовой пояс GMT +3, время: 04:36.