Question

我正试图在一排3个按钮下滑动一个（人的生物）div，每个按钮都有一个人的名字。单击一个按钮，相应人员的生物在其下滑动。我给了按钮和相应的人的生物div我想滑下同一个班级。最终，当点击一个按钮时，我想为当前显示的人的生物制作动画，使其从屏幕的右侧射出，然后点击按钮的生物将向下滑动。我注意到如果有东西被设置为display：none是我的样式表，我无法为它设置动画，但是如果我在slideDown之前设置了一个元素来显示我的JS，那么它就可以了。

<div class="about-btn-bar">
  <div class="about-btn-diane"><a class="diane" href="#">Diane</a></div>
  <div class="about-btn-juli"><a class="juli"  href="#">Juli</a></div>
  <div class="about-btn-stephanie"><a class="stephanie" href="#">Stephanie</a></div>  
</div>

<div class="bios-wrapper">
   <div class="about-diane diane">
        <img width="160" height="180" src="images/diane.jpg">
        <p class="bio">Diane's bio here.</p>    
   </div>
   <div class="about-juli juli">
        <img src="images/juli.jpg">
        <p class="bio">Juli bio here.</p>   
   </div>
   <div class="about-stephanie stephanie">
        <img src="images/stephanie.jpg">
        <p class="bio">Stephanie bio here.</p>
   </div>
</div>

CSS：

.bios-wrapper div{
    position: absolute;
    padding-bottom: 75px;
    width:100%;
    overflow: hidden;
    display: none;
    left:0px;
    top:150px;
}

JS：

<script type="text/javascript">
     $('.about-btn-bar a').click(function(e){
        e.preventDefault();
        var myClass = $(this).attr("class");
        $('.bios-wrapper div').class(myClass).slideDown("slow");
    });
</script>

Answer 1

<强> LIVE DEMO

$('.about-btn-bar a').click(function(e){
  e.preventDefault();
  $('.bios-wrapper .'+ this.className).slideDown("slow");
});

如果你想滑动以前打开的元素，这可能会非常方便：

$('.about-btn-bar a').click(function(e){
  e.preventDefault();
  $('.bios-wrapper > div').slideUp(800);
  $('.bios-wrapper .'+ this.className).stop().slideDown(800);
});

如果您还需要切换已打开的那个：

$('.about-btn-bar a').click(function(e){
  e.preventDefault();
  $('.bios-wrapper > div').slideUp(800);
  $('.bios-wrapper .'+ this.className).stop().slideToggle(800);
});

Answer 2

修改我已将此更新为隐藏slideDown()之前的内容：

$('.about-btn-bar').on('click', 'a', function (event) {
    event.preventDefault();
    var $myClass = $('.'+$(this).attr('class'));

    $('.bios-wrapper div').hide();
    $myClass.slideDown('fast');
});

<强> Example Fiddle

无法使slideDown工作

2 个答案: