Question

我有这个方框：

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

我想让它成为这种风格的动画："border: 2px solid; margin: 1px; padding: 7px; width: 409px;"

然后在其中插入一些文字，例如this is a test message或其他内容。

Answer 1

试试这个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

Answer 2

试试这个，它使用通过java sscript改变CSS类触发的CSS3转换：

<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>

直播示例：
http://simplestudio.rs/yard/div_animate/chng_color.html

使javascript动画div并插入文本

2 个答案: