Question

使用.slideUp()将textarea的值附加到div后，JQuery的.append()不起作用。

的 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);
}

我无法弄清楚问题是什么，因为当我使用 .show（）而不是 .slideUp（）时，它可以正常工作。

Answer 1

嗯... slideDown让元素显示，slideUp让它被隐藏。尝试

    $(html).slideDown(500)

@ Philip Hardyhis说：解决了我的问题。但是，有没有办法让它从底部向上滑动而不必使用.animate（）

我不这么认为，但我认为这很容易：只需在html中放入一个div元素（使用$（html）就很难处理）让我们称之为“myDiv”并将html的每个内容都放在myDiv中

然后将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');});

我认为它应该像这样工作

Answer 2

在将新div添加到#cont之前隐藏新div，然后在其上调用.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/

Answer 3

除此之外，从L. Monty已经指出你可以通过使用jQuery的链接来缩小你的功能。

$('button').on('click', function() {
    $('<div>')
       .html($('#txt').val())
       .appendTo('#cont')
       .slideDown(0).slideUp('slow');
});

.slideDown（）似乎不起作用

3 个答案:

@ Philip Hardyhis说：解决了我的问题。但是，有没有办法让它从底部向上滑动而不必使用.animate（）