0

我试图让动画在这个简单的 Jquery 隐藏/显示程序中工作。但是当我隐藏内容并按“少...”时，没有动画，只是简单的过渡。我在这个小东西上工作了几个小时，但没有成功。有什么建议么？

<!DOCTYPE html>
<head>
    <style>
        body{ width:50%; margin: 0 auto;}
        .content{background:yellow; font-size:large; margin-top:10px; 
            padding:5px;}
        a{text-decoration:none;}
    </style>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#overflow").hide();

            $(".moreorless").click(function() {
                event.preventDefault();
                $(this).next("#overflow").slideToggle();

                if($(this).prev("#overflow").is(":hidden")){
                    $(this).prev("#overflow").show();
                    $(this).html(" less...");
                }
                else{
                    $(this).prev("#overflow").hide();
                    $(this).html(" more...");
                }       
             });
        })
    </script>
</head>

<body>
    <div class="content">
        Some Lorem ipsum<span id="overflow"> and some more lorem 
        and more and more and more and more and more and more and more and more  
        more and more and more and more and more and more and more and more and  
       </span><a href="#top" class="moreorless"> more...</a> 
    </div>
</body>
</html>

jsFiddle：http: //jsfiddle.net/r5tYB/

4

2 回答 2

0

这应该这样做。您应该将持续时间参数发送到功能切换。

$("#overflow").toggle(500);
if ($("#overflow").is(':visible')) {
    $(this).text('less...');
} else {
    $(this).text('more...');
}

http://jsfiddle.net/r5tYB/

于 2013-02-27T17:52:55.180 回答
0

这是否：http: //jsfiddle.net/4c9U4/1/像您期望的那样工作？

$("#overflow").slideToggle(0);

$(".moreorless").click(function(event) {
    event.preventDefault();

    if($(this).prev("#overflow").is(":hidden")){
        $(this).html(" less...");
    } else {
        $(this).html(" more...");
    }

    $("#overflow").slideToggle();
});

我不确定问题出在哪里，但是如果您使用.hide()或 CSS 隐藏#overflow，则转换将不会在第一次工作。

于 2013-02-27T17:51:22.500 回答