jquery - リンク付きの別のdivのクラスを変更する

Question

ページが読み込まれたときに最初に.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>

score 2 · Accepted Answer

解決しました。

ライブデモ: 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 */
    }

score 1 · Accepted Answer

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

score 0 · Accepted Answer

フェードするには、次のようにjQuery UIを参照する必要があります<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");

  });

});

score 0 · Accepted Answer

クラスをアニメーション化したい。右？ここにライブデモを含む簡単なコードがあります

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

実際の例はここにあります http://jsfiddle.net/8nrzh/

jquery - リンク付きの別のdivのクラスを変更する

4 に答える 4

Related

Reference