Вместо оператора if вы, вероятно, захотите использовать функцию .toggle () jQuery, поскольку она позволит вам переключаться между несколькими вариантами, в данном случае ваши цвета bg. Вы не можете иметь зеленый слайд на синий с одним. Вам необходимо создать второй элемент div и установить для него значение none. Затем нажмите на кнопку для переключения между двумя слоями с помощью функций слайд и скрытие.
<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>
Это, вероятно, не будет работать, если использовать дословно, но, по крайней мере, должно дать вам отправную точку. Я бы просмотрел документацию на jquery.com.