Geek asks and answers

.slideDown () is not suitable for work

JQuery .slideUp () does not work after .append () is used to add the textarea value to the 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);
}

I cannot figure out what the problem is because when I used .show () instead of .slideUp () , it works fine.

+5
source share
3 answers

well ... let slideDown show the element and slideUp let it be hidden. try

    $(html).slideDown(500)

@Philip Hardyhis says: fixes my problem. However, is there a way for it to slide from below without using .animate ()

, , : div- html ( $(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');});

,

+3

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

Fiddle: http://jsfiddle.net/7Zp5w/1/

+1

In addition, from L. Monti has already indicated that you can configure your function a bit using the jQuery chain.

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

More articles:


All Articles