5

.append（）を使用してtextareaの値をdivに追加した後、 JQueryの.slideUp（）は機能しません。HTML：

<html>
    <body>
        <div id="cont">
            <textarea id="txt"></textarea>
            <button onclick="click()">Click</button>
        </div>
    </body>
</html>


JavaScript：

function click(){
    var txt = $('#txt').val();
    var html = document.createElement('div');
    $(html).hide().html(txt);
    $('#cont').append(html);
    $(html).slideUp(500);
}

.slideUp（）の代わりに.show（ ）を使用すると正常に動作するため、問題が何であるかを理解できません。

4

3 に答える 3

3

さて...slideDownで要素を表示し、slideUpで非表示にします。試す

    $(html).slideDown(500)

@フィリップハーディヒスは言っています：私の問題を修正します。ただし、.animate（）を使用せずに下から上にスライドさせる方法はありますか？

私はそうは思いませんが、それはかなり簡単だと思います。htmlの中にdiv要素を入れるだけで（$（html）を使用すると処理が難しくなります）、それを「myDiv」と呼び、 myDivのhtml

次に、divをウィンドウの外側に移動して、アニメーションを実行します（ウィンドウのスクロールを一時的に無効にする必要があるため、下部の外側に移動することに注意してください）。

$(document).css('overflow','hidden');
$("#myDiv").css({'top':$(document).height(), 'opacity':'0'});
/*outside of the window and transparent*/
$("#myDiv").animate({
    'opacity':'1',
    'top':'0'
},2000, function(){$(document).css('overflow','auto');});

私はそれがこのように動作するはずだと思います

于 2012-05-22T00:44:00.853 に答える
1

追加する前に新しいdivを非表示にします。#cont次に、それを呼び出し.slideDownて次のことを明らかにします。

// When the button is pressed
$("button").on("click", function(){
    // Create a new DIV with our text as its content
    $("<div>", { text: $("#txt").val() } )
         // Make it invisible, append it, and then slide it into view
        .hide().appendTo("#cont").slideDown(500); 
});​

フィドル： http： //jsfiddle.net/7Zp5w/1/

于 2012-05-22T00:42:04.963 に答える
1

余談ですが、L。Montyがすでに指摘しているように、jQueryのチェーンを利用することで、関数をかなり凝縮することができます。

$('button').on('click', function() {
    $('<div>')
       .html($('#txt').val())
       .appendTo('#cont')
       .slideDown(0).slideUp('slow');
});​
于 2012-05-22T00:54:23.757 に答える