9.21

2017-09-21  本文已影响0人  手持张滚滚

JQ的事件和动画

1.事件

先举个栗子:

$(function(){        $("div").bind("click",function(){        $("body").append("

click事件

");        })        $("div").bind("click.plugin",function(){        $("body").append("

click.plugin事件

");        })        $("button").click(function(){        $("div").trigger("click!");        })        })

其中,click可以被命名,在之后操作修改的时候可以有可取性,可以删除".plugin"的事件,单独实现click的事件 (.unblind(.pligin))

2.动画

①show()

$("#sss").show();//#sss显示出来 hide()反之

$("#sss").show(1000);//show(时间,单位为毫秒) 此例,就是在一秒内显示出来 高度 宽度 不透明度

②fadeIn()/fadeOut()

只改变不透明度

③slideUp()/slideDown()

只改变高度

④animate()

改变高度 宽度 不透明度

以下$("#sss").click(function(){}

A.$("#sss").animate({left:"100px),font-size:"12px"},2000);//最常用的方法 左边是改的动作 右边是给定的完成时间(2s内,向右移动100px,字体变为12px )

B.累加,累减

$("#sss").animate({left:"+=100px"},2000);//有跟clone(ture)类似的效果,被移动过100px之后,再次点击还有一样的效果;

C.

①如果如A中的例子,其中的两种变化会同时进行,变为下面的例子就会依次进行:

$("#sss").animate({left:"100px},2000)

              .animate({font-size:"12px"},2000);

②$("#sss").click(function(){

$("#sss").animate({left:"100px},2000)

.animate({font-size:"12px"},2000);

.css("background","red";

});//此例中有css样式,不是动画效果,不会根据顺序实现操作,会一开始就实现操作

这时候,哼,就有了动画回调函数!

如下callback:

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

$("#sss").animate({left:"100px},2000)

.animate({font-size:"12px"},2000,function(){

$("#sss").css("background","red");

});

});

D.停止

$("#pane1").hover(function(){

$(this).stop()

.animate({height:"150px",width:"300px"},2000)

},function(){

$(this).stop()

.animate({height:"22",width:"50"},2000)

})

不懂啊,再回去例子悟一遍,反正stop(false,true)不带停顿的快速完成

stop(true,true)会有设置的时间的等待时间后在快速完成

E.判断元素是否处于动画状态

举个栗子:

if (!$("#pane1").is(":animated")){

$("#pane1").hover(function(){

$(this).stop(false,true)

.animate({width:"200"},2000)

.delay(5000)

.animate({height:"150"},2000)

.delay(5000)

.animate({opacity:"0.2"},2000)

})

};//一开始#pane1是没有任何效果,在发现没有动画效果后,立刻施加一发动画效果,美滋滋

⑤.延迟动画

.delay()

简单明了,括号里就是写你要的延迟的时间,然后看上面的那个栗子,就是在5s后执行“下面的”那个代码

3.toggle()

这个东西,比如$("#sss").toggle(),$("#sss")原本是显示的,那么设置之后就是不显示,反之就是反之。

然后,比如$("#sss").toggle(function(){

$(this).show()

},function(){

$(this).hide();

});//单击第一次,显示;单机第二次,隐藏;以此类推,之后可以继续设置,可是,本萌美,写不出来,写出来的可能不对

4.视频效果实例展示

对不起,css忘没了。

css忘没了其实与不是关键,就是,我看不懂。

5.!!!!!!!

休息休息 晚上进攻表单

上一篇下一篇

猜你喜欢

热点阅读