如何使用jQuery的slideToggle（）和CSS实现颜色过渡效果？

Question

如何使用jQuery的slideToggle（）和CSS实现这样的效果，其中幻灯片的内容具有背景颜色，并通过相同颜色连接到其可点击按钮？我正在使用Bootstrap.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>

Answer 1

从lorem类中删除margin-top css，如下所示： -

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

它可能对你有帮助。