javascript - .slideDown() 似乎不起作用

标签 javascript jquery

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

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() 时它工作正常。

最佳答案

好吧...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');});

我觉得应该是这样的

关于javascript - .slideDown() 似乎不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10694420/

相关文章:

javascript - JQuery datepicker 方法不适用于重复元素

javascript - 将数据传递给 nuxt fetch,存储调度不起作用

javascript - 如何使用一系列 promise 在函数数组中传递参数

javascript - url 中的 PC 名称将在 IE 中设置错误

javascript - 在 Meteor 中缩短收集字段以进入

javascript - React如何强制隐藏图像在渲染时加载?

javascript - 从 javascript 调用 Webform 身份验证页面后面的 .net Web 服务

jquery - CSS z-index 不工作

javascript - 添加帮助弹出窗口

javascript - jquery 动画使 ipad 挂起