更改類單獨的div與鏈接

我需要先.light類添加到#banner在頁面加載時，然後單擊#change的時候，我想從.light類褪色.dark更改類單獨的div與鏈接

<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>

來源

2012-05-22 tstrebeck

已解決。

現場演示：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-22 17:32:05

http://jsfiddle.net/Yh7pE/2/更新改回另一個點擊，不知道這被通緝 – Steve

@Steve尼斯:-) –

我將如何去淡化過渡？ – tstrebeck

對於衰落，你需要在你的<head>到refrence 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"); 

    }); 

});

來源

2012-05-22 17:28:40 Sampson

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

來源

2012-05-22 17:28:42 thecodeparadox

要動畫類。對？這裏是現場演示

$(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-22 17:44:05 Imdad

@tstrebeck，你可以將動畫時間從800毫秒改變爲任何你想要的 – Imdad

更改類單獨的div與鏈接

回答

相關問題