我想出了如何在单击按钮时使用 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 */
}
希望大家能帮帮我!
最佳答案
要过渡 CSS,您需要元素上的过渡属性。我建议使用 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");
});
关于javascript - Jquery改变背景颜色并平滑过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39278542/