jquery绑定事件与动画

绑定多个事件类型，示例代码如下：

$(function(){

$("div").bind("mouseover mouseout",function(){

$(this).toggleclass("over");

});

});

上面代码与下面的代码效果一样；

$(function(){

$("div").bind("mouseover",function(){

$(this).toggleclass("over")

});

$("div").bind("mouseout",function(){

$(this).toggleclass("over")

});

});

jquery中的动画：

1：show() hide()

hide()就相当于把元素的display样式改为“none”代码表示如下：

$("element").hide(); == $("element").css("display","none");

2：fideIn() fideOut()

与hide() show() 方法相类似，fideIn方法是（淡入）内容慢慢的显示，fideOut方法是（淡出）内容慢慢的消失，

$("div").toggle(function(){

$(this).next().fideIn();

},function(){

$(this).next().fideOut(); //以上方法都可以添加参数 如show(1000);表示内容在1000毫秒内显示。同时都可以用三中 参数“slow”“normal”“fast”分别是0.6秒
0.4秒 0.2秒。

});

3：slidUp() slidDown()

slidDown() 元素是自上而下延伸显示；slidUp()是下而上逐渐隐藏。示例代码如下：

$("#panel").toggle(function(){

$(this).slidUp(100);

},function(){

$(this).slidDown(100);

})

除了上面的三种方法外jqury还可以自定义动画方法：

animate(params,speed,callback);

params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2"....}

speed:速度参数，可选。

callback:在动画完成之后执行的函数，可选。//callback函数适用于任何jqeury方法中。

示例代码如下：

$(function(){

$("#panel").click(function(){

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

});

});

同时可以设置累加或累减。只需在500px前加+= 或者 -=；

同时也可以设置多重动画，只需在{}中加入更多是元素即可，如{left:"+=500px",heigh:"-=300px"};

以上动画都是同时进行的也可以按照一定顺序执行动画：如：

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

.animate({heigh:"300px"},3000);

综合动画 代码示例：

$("#penal").css("opacity",0.5);

$("#penal").animate({left:"500px",top:"200px"},3000)

.animate({height:"300px",width:"200px"},3000)

.fadOut("slow");

动画回调函数：

判断动画是否积累：

为了避免动画积累而导致的动画与用户的行为不一致，我们需要判断元素是否处于动画状态，示例代码如下：

if(!$(element).is(":animate")){

//如果当前没有进行动画，则添加新动画。

}；

延迟动画：

$(this).animate({left:"300px",height:"200px",opacity:"1"},3000)

.delay(1000)

.animate({width:"300px",top:"300px",opacity:"i"},2000)

.delay(2000)

.animate({width:"300px",top:"300px",opacity:"i"},2000);

其他动画方法：

toggle(speed,[callback]). 该方法切换原元素的可见状态，

slideToggle(speed,[easing],[callback]) 该方法通过高度变化来切换匹配元素的可见性。

fadeTo(speed,opacity,[callback]) 该方法吧元素的不透明度一渐进的方式调整到制定的值。

fadeToggle(speed,[easing],[callback]) 该方法通过更改元素的不透明度来切换匹配元素的可见性。

总结：动画方法

hide() show(). fadeIn() fadeOut(), slideUp() slideDown() fadeTo() fadeToggle() slideToggle() aimate()

注意：aimate() 属于自定义动画的方法。可以使用他来代替其他所有的动画方法。