当页面加载时,我需要首先将 .light
类添加到 #banner
中,然后当单击 #change
时,我'我想将类从 .light
淡入淡出 .dark
<style type="text/css>
#banner { width: 1000px; height: 500px; }
.light { background: url(light.jpg) #ffffff; }
.dark { background: url(dark.jpg) #000000; }
</style>
<script type="text/javascript">
// no idea what to do
</script>
<div id="banner">
stuff
</div>
<div id="container">
<div id="leftCol">
<a href="#" id="change">Change</a>
</div>
</div>
最佳答案
已解决。
现场演示: http://jsfiddle.net/oscarj24/Yh7pE/9/
$(function(){
$("#banner").addClass("light");
$("#change").on("click", function(e){
$("#banner").toggleClass("light").hide().toggleClass("dark").fadeIn();
e.preventDefault();
});
});
CSS:
.light {
background: url(http://oursaviorschurch.com/img/bg_banner.jpg) #ffffff;
opacity: 0.30; /* FX, Safari, GC, Opera, decent browsers */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8 */
filter: alpha(opacity=30); /* IE */
/* in Safari, FX and Chrome add a fade transition */
-webkit-transition: opacity .25s linear .1s;
transition: opacity .25s linear .1s;
}
.dark {
background: url(http://oursaviorschurch.com/img/bg_banner_dark.jpg) #000000;
opacity: 1; /* FX, Safari, GC, Opera, decent browsers */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
filter: alpha(opacity=100); /* IE */
}
关于jquery - 使用链接更改单独 div 的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10706997/