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

これを試してください。Javasscriptを介して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 に答える