如何使用jQuery的slideToggle（）和CSS實現顏色過渡效果？

如何使用jQuery的slideToggle（）和CSS實現這樣的效果，其中幻燈片的內容具有通過相同顏色連接到其可點擊按鈕的背景色？我爲行和列使用Bootstrap.css。如何使用jQuery的slideToggle（）和CSS實現顏色過渡效果？

的源代碼：http://jsfiddle.net/azimbaig/37t6uzw0/1/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
<style> 
    .first { 
     /*position: fixed; 
     left: 50%; 
     top: 10%; 
     transform: translate(-50%, 0);*/ 
     margin-left: 50%; 
     margin-top: 10%; 
     transform: translate(-50%); 
    } 
    .button { 
     width: 200px; 
     background-color: #EEE; 
     margin-right: 10px; 
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
     transition: all 0.2s ease-in-out; 
    } 
    .hidden { 
     visibility: hidden; 
    } 
    .lorem { 
     display: none; 
     background-color: #EEE; 
     margin-top: 50px; 
    } 
</style> 
<div id="container"> 
    <div class="row first"> 
     <a href="#box1"> 
      <div id="btn_box1" class="col-md-4 button"> 
       <h1>Box #1</h1> 
       <div></div>   
      </div> 
     </a> 
     <a href="#box2"> 
      <div id="btn_box2" class="col-md-4 button"> 
       <h1>Box #2</h1> 
       <div></div>   
      </div> 
     </a> 
     <a href="#box3"> 
      <div id="btn_box3" class="col-md-4 button"> 
       <h1>Box #3</h1> 
       <div></div>   
      </div> 
     </a> 
    </div> 
    <div class="row content1"> 
     <div class="col-md-2"></div> 
     <div id="box1" class="col-md-8 lorem"> 
      <h1>What is Lorem Ipsum?</h1> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 
     <div class="col-md-2"></div> 
    </div> 
    <div class="row content2"> 
     <div class="col-md-2"></div> 
     <div id="box2" class="col-md-8 lorem"> 
      <h1>Google's Material Design</h1> 
      <img src="https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign_principles_metaphor.png"> 
     </div> 
     <div class="col-md-2"></div> 
    </div> 
    <div class="row content3"> 
     <div class="col-md-2"></div> 
     <div id="box3" class="col-md-8 lorem"> 
      <h1>Dummy text</h1> 
      <p>Congue per sagittis semper vitae magna convallis consectetuer gravida cubilia. Orci nec Tincidunt Vestibulum phasellus aenean turpis nulla. Porta. Semper vel fermentum conubia vulputate dui. Sociis litora. Commodo iaculis.Molestie rutrum a viverra. Nam purus congue eleifend egestas et lobortis venenatis posuere. Magnis molestie. Tortor platea tellus velit mauris nostra rhoncus mauris adipiscing curabitur neque scelerisque aliquet facilisi sapien quisque vulputate varius nec. Aliquet augue feugiat taciti sit Lacus imperdiet. Litora parturient sed pellentesque, cubilia enim ad habitasse tortor Vehicula porta nascetur leo fringilla scelerisque sapien natoque sagittis elementum vel eu augue fringilla ipsum quam amet dapibus adipiscing sociis nulla.</p> 
     </div> 
     <div class="col-md-2"></div> 
    </div> 
</div> 
<script> 
$(document).ready(function(){   
    $('#btn_box1').click(function(){ 
     $("#box1").slideToggle(); 
     $("#box2").hide(); 
     $("#box3").hide(); 
    }); 
    $('#btn_box2').click(function(){ 
     $("#box2").slideToggle(); 
     $("#box1").hide(); 
     $("#box3").hide(); 
    }); 
    $('#btn_box3').click(function(){ 
     $("#box3").slideToggle(); 
     $("#box1").hide(); 
     $("#box2").hide(); 
    }); 
}); 
</script>

來源

2016-01-13 Azim

提供您的源代碼。 –

尋求代碼幫助的問題必須包含在問題本身**中重現**所需的最短代碼。請參閱[**如何創建最小，完整和可驗證示例**]（http://stackoverflow.com/help/mcve） –

@ ssc-hrep3提供的源代碼 – Azim

取下LOREM類的邊距CSS類似以下內容： -

.lorem { 
     display: none; 
     background-color: #EEE; 
}

它可以幫助你。

來源

2016-01-18 08:55:28

它將刪除標籤和內容之間的空間。 –

如何使用jQuery的slideToggle（）和CSS實現顏色過渡效果？

回答

相關問題