首页 文章

slideUp（），slideDown，show（）和hide（）不是动画

提问于
浏览 次
1

我使用以下代码在ul-li中制作手风琴：

$(document).ready(function(){
    var rr = true;
        $('ul.side > li.first-level > ul').hide();

        $('ul.side > li.first-level').click(function(){

            if(rr===true){
            $(this).children('ul').slideDown(150);
            rr = false;
            }

            else{
            $(this).children('ul').slideUp(150);
            rr = true;

            }

        });

    });

问题是show-hide或slideUp-slideDown正在显示或隐藏内容，但也没有动画 . Intead，我发现你增加值或者下滑show-hide越多，它在显示或隐藏元素时的延迟就越多 . 我在这个网站的某个地方找到了一个问题，他遇到了同样的问题，但答案告诉他不要使用tbody . 我很开心 . 我甚至尝试将ul显示或隐藏在div下，但它是相同的 . 这是小提琴：http://jsfiddle.net/xCHCF/ . 提前致谢 .

jquery

1 回答

  • 1

    它是一个CSS问题，你不能浮动 <a> ，你必须设置它块：

    ul.side a {
    border-bottom: 1px solid #494949;
    color: #000000;
    /* float : left; */
    display: block; <--
    padding: 15px 3%;
    text-align: right;
    text-decoration: none;
    width: 94%;
}

    对于jquery部分，你可以这样做：

    $('ul.side > li.first-level > ul').hide();
$('ul.side > li.first-level').click(function(){
    $(this).children('ul').slideToggle(250);
});

    这里是jsFiddle：http://jsfiddle.net/SfKR4/

    由于评论，解释为什么会发生这种情况 .

    动画很讨厌，你看不见它，直到它完成！

    其简单的原因： The magic of “overflow: hidden” 读取此内容：http://colinaarts.com/articles/the-magic-of-overflow-hidden/了解有关此效果的更多详情！

    当 <ul> 开始设置动画时，jquery会在其上设置一个 overflow:hidden; ，并开始将 height 表格0设置为其实际 height 的动画，当达到高度时， overflow:hidden; 将被删除， <ul> 得到 <a> .

    设置在你的小提琴中， <a> 的宽度为50％，你会发生什么事情！在这里：http://jsfiddle.net/BEtU2/

    删除 float ，设置为 display:block; 会从 <a> 开头删除 overflow:hidden; 和 <ul> 的魔力 .

    希望能帮助到你 .

    回复于

相关问题