Изменить цвет div постепенно, используя jQuery ТОЛЬКО

Ниже приведен код HTML-CSS-JQuery. Проблема: когда я нажимаю на кнопку фона, цвет меняется с оранжевого на зеленый сразу. Что я хочу, когда я нажимаю кнопку «Фон», цвет фона div должен медленно меняться. Обратите внимание, что мне разрешено использовать JQuery. Нет. Можно использовать другие плагины.Изменить цвет div постепенно, используя jQuery ТОЛЬКО

Код:

<!DOCTYPE html> 
<html> 
<head> 

<style> 
#box 
{ 
position:absolute; 
height:200px; 
width:200px; 
background-color:orange; 
padding: 20px; 
margin: 200px 200px; 

} 

</style> 


<script src="//code.jquery.com/jquery-1.10.2.min.js"> </script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#width").click(function(){ 
    $("#box").animate(
      {"width": "300px"}, 
      "slow");   

    }); 
    $("#height").click(function(){ 
    $("#box").animate(
      {"height": "300px"}, 
      "slow");   

    }); 
    $("#background").click(function(){ 
    $("#box").css("background-color","green"); 
    }); 


}); 
</script> 
</head> 
<body> 

<button id="width" type="button"> Width </button> 
<button id="height" type="button"> Height </button> 
<button id="background" type="button"> Background </button> 
<div id="box"> 
<p>Bringing so sociable felicity supplied mr. September suspicion far him two acuteness perfectly. Covered as an examine so regular of. Ye astonished friendship remarkably no. Window admire matter praise you bed whence. </p> 
</div> 

</body> 
</html>

источник

2013-11-15 Shubham

попробовать что-то вроде этого, FIDDLE

 $("#background").click(function(){ 
      $("#box").css({ 
       transition : 'background-color 1s ease-in-out', 
       "background-color": "green" 
      }); 
     });

источник

2013-11-15 07:04:12

Работает как очарование! Спасибо! – Shubham

вы можете сделать также CSS В CSS

.slowbackground { 
    background-color: green; 
    -webkit-transition: background-color 0.4s ease; 
    -moz-transition: background-color 0.4s ease; 
    -o-transition: background-color 0.4s ease; 
    transition: background-color 0.4s ease; 
    background-color: D3E1FA; 
}

в Js

$("#background").click(function(){ 

    if( $("#box").hasClass("slowbackground")) { 
     $("#box").addClass("slowbackground"); 
     } 

});

источник

2013-11-15 06:51:33

Изменить цвет div постепенно, используя jQuery ТОЛЬКО

ответ

Смежные вопросы