Background color property slide up

Question

The question is in in transitionBackground function. In this case, the function triggers when the up button is pressed on the page.

Answer 1

Instead of the if statement you'll probably want to use jQuery's .toggle() function as it will allow you to toggle between multiple options, in this case your bg colors. You can't have the green slide up on the blue with one . You need to create a second div and set the display to none. Then onclick toggle between the two layers by using the slide and hide functions.

<script type="text/javascript">
    var transitionBackground = function (){
        $(div).toggle(
            function(){
                $(div).hide();   
            },
            function(){
                $(div).slideUp();
            }
        );
    });
</script>
<div id="container">
<div style="height: 3em; width: 3em; background:blue; position:absolute; z-index:1"></div>
<div style="height: 3em; width: 3em; background:green; position:absolute; z-index=2; display:none;"></div>
</div>

This probably won't run if used verbatim, but should provide you a starting point at least. I'd review the documentation on jquery.com.

Answer 2

Here's an example using the toggle function with two divs: http://jsfiddle.net/SmAHU/ (loosely based on Nick011's reply)