.slideDown() Doesn't Seem To Work
Question
JQuery's doesn't work after is used to append value of textarea to the div. 将textarea的值附加到div后，JQuery的不起作用。
<html>
<body>
<div id="cont">
<textarea id="txt"></textarea>
<button onclick="click()">Click</button>
</div>
</body>
</html>
function click(){
var txt = $('#txt').val();
var html = document.createElement('div');
$(html).hide().html(txt);
$('#cont').append(html);
$(html).slideUp(500);
}
I can't figure out what the problem is because when I used instead of it works fine. 而不是它可以正常工作。
3 answers
solution1
3 ACCPTED 2012-05-22 00:44:00
well...slideDown let the element be shown and slideUp let it be hidden. try
$(html).slideDown(500)
@ Philip Hardyhis saying: fixes my problem. However, is there a way to have it slide up from the bottom without having to use .animate()
i don't think so, but I think it would be pretty easy: just put a div-element inside of the html (with $(html) it will be hard to handle) lets call it "myDiv" and put every content of the html in myDiv
then move the div outside of the window and do the animation (note to move it outside at the bottom you need to temporary disable scrolls of window)
$(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');});
i think it should work like this
solution2
1 2012-05-22 00:42:04
Hide the new div prior to adding it to #cont - then call .slideDown on it to reveal:
// 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);
});
Fiddle: http://jsfiddle.net/7Zp5w/1/
solution3
1 2012-05-22 00:54:23
Aside, from L. Monty already pointed out you can condense your function quite a bit by making use of jQuery's chaining.
$('button').on('click', function() {
$('<div>')
.html($('#txt').val())
.appendTo('#cont')
.slideDown(0).slideUp('slow');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.