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

我不知道问题出在哪里，因为当我使用.show()而不是.slideUp()时，它工作正常。

4

3 回答 3

3

好吧...slideDown 让元素显示，slideUp 让它隐藏。尝试

    $(html).slideDown(500)

@Philip Hardyhis 说：解决了我的问题。但是，有没有办法让它从底部向上滑动而不必使用 .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

另外，L. Monty 已经指出，您可以通过使用 jQuery 的链接来大大压缩您的函数。

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