Question

我想在点击另一个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：

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

Answer 1

只需在动画div上放置一个标志。我使用了HTML5 data-*属性，但您也可以使用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之类的内容吗？或者我只是没有得到你想要的。那么请尝试更好地描述它：）

Javascript：DIV图层的条件动画

1 个答案:

的JavaScript

HTML