Search code examples
javascriptjqueryanimationjquery-animatejstween

Javascript: Conditional animation of DIV layer

I’d like to enable an animation of a DIV layer on a click of another div. At the same time, I need to have a conditional statement that will enable the animation only if the DIV layer I am planning to animate was not animated yet.

I was thinking to check against height value because I animate the height of the div. I am wondering how correctly to check against the height of a div layer to permit animation if the height 400px for example.

I also open for a better way to control the animation in my sample. I am using JSTween library. Below is the code. Any advice is highly appreciated! Thank you.

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

Styles:

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

  • Just put a flag on the animated div. I used the HTML5 data-* attribute for that but you can also use the data() function of jQuery.

    Just change your javascript code and html to following and see my 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>​

    This will work!

    UPDATE

    Do you want something like Update 1 or UPDATE 2, or UPDATE 3? Or do I just don't get what you want. Then please try to describe it better :)