jQuery--动画效果

动画效果

显示和隐藏动画

show()

hide()

$(function () {
     编写jQuery相关代码
    $(button).eq(0).click(function () {
         $(div).css(display, block)
         注意 这里的时间是毫秒
        $(div).show(1000, function () {
             作用 动画执行完毕之后调用
            alert(显示动画执行完毕)
        })
    })
    $(button).eq(1).click(function () {
         $(div).css(display, none)
        $(div).hide(1000, function () {
        	alert(隐藏动画执行完毕)
        })
    })
    $(button).eq(2).click(function () {
   		$(div).toggle(1000, function () {
    		alert(切换动画执行完毕)
    	})
    })
})

展开和收入动画

slideDown()

slideUp()

$(function () {
     编写jQuery相关代码
    $(button).eq(0).click(function () {
    	$(div).slideDown(1000, function () {
    		alert(展开完毕)
    	})
    })
    $(button).eq(1).click(function () {
    	$(div).slideUp(1000, function () {
    		alert(收起完毕)
    	})
    })
    $(button).eq(2).click(function () {
    	$(div).slideToggle(1000, function () {
    		alert(收起完毕)
    	})
    })  
})

淡入淡出动画

fadeIn()

fadeOut()

fadeTo

$(function () {
     编写jQuery相关代码
    $(button).eq(0).click(function () {
    	$(div).fadeIn(1000, function () {
    		alert(淡入完毕)
    	})
    })
    $(button).eq(1).click(function () {
    	$(div).fadeOut(1000, function () {
    		alert(淡出完毕)
    	})
    })
    $(button).eq(2).click(function () {
    	$(div).fadeToggle(1000, function () {
    		alert(切换完毕)
    	})
    })
    $(button).eq(3).click(function () {
    	$(div).fadeTo(1000, 0.2, function () {
    		alert(淡入完毕)
    	})
    })
})

自定义动画

animate()

• 第一个参数 接收一个对象, 可以在对象中修改属性
• 第二个参数 指定动画时长
• 第三个参数 指定动画节奏, 默认就是swing
• 第四个参数 动画执行完毕之后的回调函数

$(function () {
     编写jQuery相关代码
    $(button).eq(0).click(function () {
    	$(.one).animate({
    		width 500
    	}, 1000, function () {
    		alert(自定义动画执行完毕)
    	})
        $(.one).animate({
            marginLeft 500
        }, 5000, function () {
             alert(自定义动画执行完毕)
        })
        $(.two).animate({
            marginLeft 500
        }, 5000, linear, function () {
         alert(自定义动画执行完毕);
        })
    })
    $(button).eq(1).click(function () {
    	$(.one).animate({
    		width +=100
    	}, 1000, function () {
    	alert(自定义动画执行完毕);
    	})
    })
    $(button).eq(2).click(function () {
    	$(.one).animate({
    		 width hide
    		width toggle
    	}, 1000, function () {
    		alert(自定义动画执行完毕)
    	})
    })
})

stop和delay方法

stop()

delay()

stop()方法

• 立即停止当前动画, 继续执行后续的动画

$(div).stop()
$(div).stop(false)
$(div).stop(false, false)

• 立即停止当前和后续所有的动画

$(div).stop(true)
$(div).stop(true, false)

• 立即完成当前的, 继续执行后续动画

$(div).stop(false, true)

• 立即完成当前的, 并且停止后续所有的

$(div).stop(true, true)

delay()方法

用于告诉系统延迟时长

$(function(){
    $(.one).animate({
    	width 500
    	 height 500
    }, 1000).delay(2000).animate({
    	height 500
    }, 1000)
})