JQuery 动画在第一次点击时不起作用

Question

第一次单击选项卡时，无法对内容的高度进行动画处理。第一次点击后就可以了。这是链接::

http://jsfiddle.net/JU4rp/

HTML

    <div id="tabs-container">

    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
    </ul>

    <div class="tab">
        <div id="tab-1" class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam p.</p>
        </div>
        <div id="tab-2" class="tab-content">
            <p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>

        </div>
    </div>
    <br/>

</div>

CSS

p{
    margin:0;
    padding:0;
}
.tabs-menu {
    height: 30px;
    float: left;
    clear: both;
    transform:rotate(270deg);
    -ms-transform:rotate(270deg); /* IE 9 */
    -webkit-transform:rotate(270deg); /* Safari and Chrome */
    margin-top: 80px;
    margin-right: -68px;
    margin-left: -68px;
}

.tabs-menu li {
    height: 30px;
    line-height: 30px;
    float: left;
    margin-right: 0px;
    background-color: #fff;
    border: 1px solid #9CCD6C;
    list-style: None;
}

.tabs-menu li.current {
    position: relative;
    background-color: #9CCD6C;
    border-bottom: 1px solid #9CCD6C;
    z-index: 5;
}

.tabs-menu li a {
    padding: 10px;
    text-transform: uppercase;
    color: #9CCD6C;
    text-decoration: none; 
}

.tabs-menu .current a {
    color: #fff;
}

.tab {
    border: 1px solid #9CCD6C;
    background-color: #fff;
    float: left;
    margin-bottom: auto;
    width: auto;
}

.tab-content {
    width: 400px;
    padding: 20px;
    display: none;
}

#tab-1 {
 display: block;   
}

JScript

    $(document).ready(function() {
    $(".tabs-menu a").on('click',function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");        
        $(tab).css("display","block");
        $(".tab-content").not(tab).css("display", "none");
        $(".tab").animate({
            height: $(tab).height()+40,
        }, "slow");

    }
    );

});

我对 Jquery 非常陌生，我一直在使用其他人的代码并对其进行操作。

Answer 1

在本例中，.tab 元素的初始高度是默认值 auto。这就是动画最初没有发生的原因。要解决此问题，只需在 .tab 元素上设置高度即可。

Updated example - 现在可以使用了。

.tab {
    border: 1px solid #9CCD6C;
    background-color: #fff;
    float: left;
    margin-bottom: auto;
    width: auto;
    height:140px;      /* Added this */
}

上述解决方案依赖于设置硬编码高度，因此它不适用于不同高度的动态内容。最好将元素的高度设置为计算出的高度。

$('.tab').height($('.tab').height());

jsFiddle example证明它现在适用于不同的高度。