0

我有这个盒子：

<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或其他东西。

4

2 回答 2

3

试试这个演示

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

更新的演示

于 2012-10-05T13:07:11.770 回答
1

试试这个，它使用通过 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

于 2012-10-05T13:16:19.053 回答