2

我需要先将.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>
4

4 回答 4

2

解决了。

现场演示：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 */
    }​
于 2012-05-22T17:32:05.257 回答
1 
$(function() {
  $('#banner').addClass('light');
  $('a#change').on('click', function(e) {
    e.preventDefault();
    $('#banner').removeClass('light').addClass('dark');
  });
})
于 2012-05-22T17:28:42.880 回答
0

对于褪色，您需要在您的<head>：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/jquery-ui.min.js">
</script>

然后剩下的：

// Wait until the document is ready before proceeding
$(function(){

  // Cache a reference to the banner to jQuery doesn't have to find it again
  var $banner = $("#banner");    

  // Immediately add the 'light' class
  $banner.addClass("light");

  // When #change is clicked, swap the classes on #banner
  $("#change").on("click", function(e){

    // Prevent the link from changing the page
    e.preventDefault();

    // Remove 'light', and add 'dark'
    $banner.addClass("dark", 1000).removeClass("light");

  });

});​
于 2012-05-22T17:28:40.150 回答
0

你想要动画类。对？这是一个带有现场演示的简单代码

$(document).ready(function(){
  $("#banner").addClass("light");
  $("#change").click(function(){
    $("#banner").stop(0,0).addClass("dark",800).removeClass("light",800);   
  });
});

一个工作示例在这里 http://jsfiddle.net/8nrzh/

于 2012-05-22T17:44:05.580 回答