0

この単純なJqueryの非表示/表示プログラムでアニメーションを機能させようとしています。しかし、コンテンツを非表示にして「less ...」を押すと、アニメーションはなく、単なるトランジションになります。私はこの小さなことに何時間も取り組みましたが、成功しませんでした。助言がありますか？

<!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

これは：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()問題が何であるかはわかりませんが、＃overflow withまたはCSSを非表示にすると、移行は最初は機能しません。

于 2013-02-27T17:51:22.500 に答える
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 に答える