Web前端基础（18）jQuery中的动画

1
2
3
4
5
6
7

$(function(){
    $("#panel").toggle(function(){
        $(this).next().hide();
    }, function(){
        $(this).next().show();
    })
})

1

animate(params, speed, callback);

1
2
3
4
5

$(function(){
    $("#panel").click(function(){
        $(this).animate({left:"500px"}, 3000);
    })
})

1
2
3

$("#myImg").click(function(){
    $(this).animate({left:"500px", height:"200px"}, 3000);
})

1

$(this).animate({left:"500px"}, 3000).animate({height:"200px"}, 3000);

1

stop([clearQueue].[gotoEnd]);

1
2
3
4
5

$("#panel").hover(function(){
    $(this).stop(true).animate({height:"150", width:"300"}, 200);
}, function(){
    $(this).stop(true).animate({height:"22", width:"60"}, 300);
})

1
2
3

if(!$(element).is(":animated")){ 
    //不在动画状态，可以添加新动画
}

1
2
3
4
5

$(this).animate({left:"400px", height:"200px", opacity:"1"}, 3000)
	.delay(1000)
	.animate({top:"200px", width:"200px"}, 3000)
	.delay(2000)
	.fadeOut("slow");

1
2
3

$("#panel h5.head").click(function(){
    $(this).next().toggle();
})

1
2
3

$("#panel h5.head").click(function(){
    $(this).next().fadeTo(600, 0.2);
})