jQuery——简单动画效果

所有动画都可以在回调函数[callback]前添加参数[easing]以改变变化的曲线，默认为linear，不需要的参数可以缺省

---

1、显示、隐藏

①、 （两个动画分开）显示、隐藏hide(spead,[callback]) 以及 show(spead,[callback])

var $container=$("#container");
var $content=$("#content");
var onOff=true;
$container.click(function(){
    if(onOff){
        $content.hide(2000,function(){
            $content.show(1000);
        })
    }
    onOff=!onOff;
)}

②、（两个代码合并，自动切换动画状态）toggle(spead,[callback])

if(onOff){
    $content.toggle(2000,function(){
        $content.show(1000);
    })
}

2、向上滑动、向下滑动

①、（两个动画分开） 向上滑动、向下滑动slideUp(spead,[callback]) 以及 slideDown(spead,[callback])

var $container=$("#container");
var $content=$("#content");
var onOff=true;
$container.click(function(){
    if(onOff){
            $content.slideUp(2000,function(){
                $content.slideDown(1000);
            })
        }
    onOff=!onOff;
)}

②、（两个代码合并）slideToggle(spead,[callback])

if(onOff){
    $content.slideToggle(2000,function(){
        $content.show(1000);
    })
}

3.、淡入、淡出

①、（两个动画分开）淡入、淡出fadeIn(spead,[callback]) 以及 fadeOut(spead,[callback])

var $container=$("#container");
var $content=$("#content");
var onOff=true;
$container.click(function(){
    if(onOff){
            $content.fadeIn(2000,function(){
                $content.fadeOut(1000);
            })
        }
    onOff=!onOff;
)}

②、fadeTo(spead,transparency,[callback])

if(onOff){
    $content.fadeTo(2000,0.2,function(){
        $content.show(1000);
    })
}

③、（代码合并）fadeToggle(spead,[callback])

if(onOff){
    $content.fadeToggle(2000,function(){
        $content.show(1000);
    })
}

4、自定义动画(animate(params,[speed],[easing],[fn]))

警告：animate不支持改变背景颜色backgroundColor

var $divSide= $("#container");
var $divInner=$("#content");
$divSide.click(function(){
    $(this).animate({
        width:"300px",
        height:"400px"
    },2000,function(){})
})