使用链接更改单独 div 的类答案

【问题标题】：Changing class of separate div with link使用链接更改单独 div 的类
【发布时间】：2012-05-22 17:26:30
【问题描述】：

我需要在页面加载时首先将.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>

【问题讨论】：

标签： jquery css jquery-animate

【解决方案1】：

解决了。

现场演示： 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 */
    }

【讨论】：

jsfiddle.net/Yh7pE/2 更新为在另一次点击时变回，不确定是否需要
我将如何淡化过渡？
所以我的问题是当我使用图像时，图像不会褪色。只有颜色。我怎样才能让图像褪色？图像只是一个艰难的过渡。
你有图片的公共链接吗？
oursaviorschurch.com/img/bg_banner.jpg oursaviorschurch.com/img/bg_banner_dark.jpg

【解决方案2】：

$(function() {
  $('#banner').addClass('light');
  $('a#change').on('click', function(e) {
    e.preventDefault();
    $('#banner').removeClass('light').addClass('dark');
  });
})

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

@tstrebeck，您可以将动画时间从 800 毫秒更改为您想要的任何时间

【解决方案4】：

对于褪色，您需要在您的<head> 中引用jQuery UI：

<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");

  });

});

【讨论】：