CODEWITHSUNDEEP
javascripthtmlcss
Mark Topper
Mark Topper

Reputation: 239

Make javascript animate div and insert text

I have this box:

<div class="message_box_red" id="commentForm_error_name" style="width: 409px; height: 0px; border: 0; margin: 0; padding: 0;"></div>

And I would like to make it animate into this style: "border: 2px solid; margin: 1px; padding: 7px; width: 409px;"

And then as well insert some text into it, like this is a test message or something.

Upvotes: 0

Views: 735

Answers (2)

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

try this demo

jQuery :

$(".message_box_red").animate({

    "border":"2px solid",
    "margin":"1px",
    "padding":"7px",
    "width":" 409px",
    "height":"40px"

  },2000,function(){$(this).text("this is a test message")});

Updated Demo

Upvotes: 3

Develoger
Develoger

Reputation: 3998

Try this, it uses CSS3 transitions triggered by changing of CSS class via java sscript:

<html>
<head>

<style>

    .message_box_red {

        width: 409px; 
        height: 50px; 
        border: 0; 
        margin: 0; 
        padding: 0;
        cursor: pointer;
        background: red;

        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -ms-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
        transition: all 1s ease-out;


    }
    .message_box_red.animate {

        border: 2px solid; 
        margin: 1px; 
        padding: 7px; 
        width: 409px;
        height: 100px;
        background: blue;
        color: #fff;

    }

</style>

<script>

    function change_class(did, content) {

        var div_change = document.getElementById(did);
        div_change.setAttribute("class", "message_box_red animate");
        div_change.innerHTML = content;

    }

</script>

</head>
<body>
    Click on DIV!
    <div class="message_box_red" id="commentForm_error_name" onclick="change_class('commentForm_error_name','this is the future content of DIV...');">

    </div>

</body>
</html>

Live example:
http://simplestudio.rs/yard/div_animate/chng_color.html

Upvotes: 1

Related Questions