Question

我正在尝试让动画在这个简单的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/

Answer 1

这是：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，转换将无法在第一时间工作。

Answer 2

这应该这样做。您应该将duration参数发送到函数切换。

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

http://jsfiddle.net/r5tYB/

在Jquery中显示和隐藏内容

2 个答案: