Jquery通过平滑过渡更改背景颜色

时间:2016-09-01 18:27:16

标签: javascript jquery css css3

我想出了如何在单击按钮时使用Jquery更改背景颜色,但我不知道如何简化过渡。我已经尝试过.css方法来添加转换。它不起作用。

这是我的Jquery将新颜色添加到背景中,它可以工作:

$("#playbtn").click(function(){
  $("#container").css("background", "#3953A0");
  $("#container").css("background", "-webkit-linear-gradient(to left, #3953A0, #2A3C70)");
  $("#container").css("background", "linear-gradient(to left, #3953A0, #2A3C70)");
  $("#container").css("background", "-moz-linear-gradient(to left, #3953A0, #2A3C70)");
  $("#container").css("filter", "progid:DXImageTransform.Microsoft.gradient( startColorstr='#3953A0', endColorstr='#2A3C70',GradientType=1 )");
}); 

我的基本#container css:

#container {
  width: 100%;
  min-height: 100%;
  position: fixed;
  background: #00C9FF; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #2A3C70 , #718DE2); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #2A3C70 , #718DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
  background: -moz-linear-gradient(left, #2A3C70 , #718DE2); /* For Firefox 3.6 to 15 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2A3C70', endColorstr='#718DE2',GradientType=1 ); /* IE6-9 */
}

希望你们能帮助我!

2 个答案:

答案 0 :(得分:0)

非常确定这与此重复:jQuery animate backgroundColor,但我无法标记这个问题。

基本上,您需要.animate()

答案 1 :(得分:0)

要转换CSS,您需要在元素上使用transition属性。我建议使用CSS通过类处理所有更改,并使用jQuery切换css类。这更容易使用,并为您提供更多控制!

CSS:

#container {
  width: 100%;
  min-height: 100%;
  position: fixed;
  background: #00C9FF; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #2A3C70 , #718DE2); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #2A3C70 , #718DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: -moz-linear-gradient(left, #2A3C70 , #718DE2); /* For Firefox 3.6 to 15 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2A3C70', endColorstr='#718DE2',GradientType=1 ); /* IE6-9 */

  /*
  Play with transition settings (time, ease type)
  */
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#container.is-active {
  background: #3953A0; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #3953A0, #2A3C70); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #3953A0, #2A3C70); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: -moz-linear-gradient(to left, #3953A0, #2A3C70); /* For Firefox 3.6 to 15 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3953A0', endColorstr='#2A3C70',GradientType=1 ); /* IE6-9 */
}

JS:

$("#playbtn").click(function(){
  $("#container").addClass("is-active");
});