CODEWITHSUNDEEP
jquery
Kudayar Pirimbaev
Kudayar Pirimbaev

Reputation: 1320

jQuery: Appending div with fixed height when slideDown() and slideUp()

On this page, hovering on a text appends a div with a text with a slide effect, but the problem is that the height of it is unstable after the effect. How can I make a height fixed?

index.html

<!DOCTYPE html>
<html>
    <head>

        <script src = "http://code.jquery.com/jquery-1.10.1.min.js" type = "text/javascript"></script>
        <script src = "script.js" type = "text/javascript"></script>
    </head>

    <body>
        <div>
            <h1 style = "width: 299px" id = "text1">Hover to see the truth</h1>
        </div>
    </body>
</html>

script.js

$(document).ready (function() {
    $(document).on ("mouseenter", "#text1", function() {

        $("body").append ("<div style = 'background-color: red; width: 299px' id = 'descr'></div>");
        $("#descr")
            .hide()
            .append ("<h3>You're an idiot</h3>")
            .slideDown ("slow");
    });

    $(document).on ("mouseleave", "#text1", function() {
        $("#descr").slideUp ("slow", function() {
            $(this).remove();
        });
    });
});

Upvotes: 0

Views: 613

Answers (1)

Shiham
Shiham

Reputation: 2184

Add appending html a style tag with fixed height. Ex: Change your .append method to:

append("<h3 style="height:100px">You're an idiot</h3>")

Upvotes: 1

Related Questions