2

我想在单击另一个 div 时启用 DIV 层的动画。同时，我需要有一个条件语句，仅当我计划制作动画的 DIV 层还没有动画时才启用动画。

我正在考虑检查高度值，因为我为 div 的高度设置了动画。我想知道如何正确检查 div 层的高度以允许动画，例如高度 400px。

我还打开了一种更好的方法来控制我的示例中的动画。我正在使用JSTween库。下面是代码。任何建议都非常感谢！谢谢你。

<script type="text/javascript">
        window.onload = function() {
            $("#plus").click(function() {
                $("#chromebottom").tween({
                            height:{
                              start: 0,
                              stop: 400,
                              time: 0,
                              units: 'px',
                              duration: 1,
                              effect:'quartOut'
                           }
                        });
                        $.play();
            });
        };
    </script>

款式：

#chromebottom {
background-color: rgb(230, 230, 230);
border: 1px solid rgb(230, 230, 230);
height: 35px;
left: 0px;
width: 100%;
position: absolute;
bottom: 0px;
z-index:1;
background:#cccccc;
}
#plus
{
position: absolute;
left: 20px;
bottom: 50px;
width: 25px;
height: 25px;
background-color:#F00;
color: #FFF;
margin:2px;
padding:2px;
display:block;
z-index: 3;
}
enter code here
#plus:hover{
background-color:#600;
cursor: pointer;
}

身体：

<body>
         <div id="plus">+</div> 
         <div id="chromebottom"></div>
    <body>
4

1 回答 1

0

只需在动画 div 上放一个标志。我为此使用了 HTML5data-*属性，但您也可以使用 jQuery 的data()函数。

只需将您的 javascript 代码和 html 更改为以下并查看我的DEMO：

JavaScript

$("#plus").click(function() {
    cb = $("#chromebottom");
    if (cb.attr("data-animation") == "false") {
        cb.attr("data-animation", "true");
        $("#chromebottom").tween({
            height: {
                start: 0,
                stop: 400,
                time: 0,
                units: 'px',
                duration: 1,
                effect: 'quartOut',
                onStop: function() {
                    cb.attr("data-animation", "false");
                }
            }

        });
        $.play();
    }

});​

HTML

<body>
         <div id="plus">+</div> 
         <div id="chromebottom" data-animation="false"></div>
<body>​

这会奏效！

更新

你想要像Update 1或UPDATE 2或UPDATE 3这样的东西吗？或者我只是没有得到你想要的。然后请尝试更好地描述它:)

于 2012-05-04T22:15:03.857 回答