动画切换、自定义动画、终止动画、延迟动画

114 阅读2分钟
slideUp (动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数);方法:动态的改变当前元素的高度
        (其他的不变),最终隐藏当前元素。此时元素的css属性修改为none。它的语法结构同hide()和show相同。
        
        
slideDown (动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数]);方法:动态的改变当前元素的高度
        (其他的不变),最终显示当前元素。此时元素的css属性修改为block。它的语法结构同hide()和show相同。
        
        
slideToggle (动画持续时间[,easing用来指定切换效果,动画执行完毕调用的函数);方法:会动态的改变当前元素高度
        (其他不变),最终切换当前元素的可见状态。也就是说,如果元素是可见的,则通过滑出效果切换成隐藏状态;如果
        元素是隐藏的,则通过滑入此效果切换为可见状态。


自定义动画:
 自定义动画概述: 光靠前面讲过的动画方法,远远无法满足开发者的各种需求,比如改变元素的位置、缩放
    元素的大小等。
    1. animate(); 方法: 可以动态改变当前元素的各种CSS属性。
    语法: animate({ 需要改变的属性: 值), 动画持续时, Leasing用来指定切换效果, 动画执行完毕调用的函数]);}; 说明: animate()方法只能够改变可以取数字值的CSS属性,例如:width、height、border - width、adding等等。
    
     $(".one").click(function () {
            $(this).animate({ "left": "40px" }, 1000);//不支持16进制的颜色变化
        })
        
终止动画:
终止动画队列概述:
如果需要在某时刻停止当前元素正在进行的动画效果,可以使用stop();效果。
语法:stop(是否要清空未执行完的动画队列,是否直接将正在执行的动画跳转到末状态);两个参数默认值均是false;

 $("input[name=but]").click(function(){
        // $(".one").stop(false,false)
        $(".one").stop(true,false)//停止后面的动画序列
        $(".one").stop(true,true)//第一个true停止后面的动画序列,第二个true停止到末尾状态
    })

a.png