必威官网登录-betway必威官网|体育在线

热门关键词: 必威体育,betway必威官网,必威官网登录,必威app下载

对被选成分的具有排队函数(仍未运转)设置延

作者: 计算机网络  发布:2019-09-09

betway必威官网,本文以实例形式详细讲述了jQuery动画特效的实现方法。分享给大家供大家参考之用。具体方法如下:

jquery中动画效果非常多,下面小编给大家分享一下jquery中的动画函数。

一.系统预定义的动画函数

1.自制折叠内容块

jQuery的效果函数列表:

1.显示隐藏函数
show(); //显示元素(同时增加宽、高、不透明度)
hide(); //隐藏元素
执行hide()隐藏界面元素,相当于将css样式中的display:none.

内容块如下:

  animate():对被选元素应用“自定义”的动画。

我们也可以在函数中加入参数,具体如下:
show("slow");
除了slow取值外,还可以设置为normal,fast,分别代表时间为600,400,200毫秒

<div class="module">
  <div class="caption">
    标题
    <img src="rollup.gif" alt="rollup" title="rolls up this module"/>
  </div>
  <div class="body">
    近日,《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧,恒大统治力比上赛季下降了很多,恒大外援存在位置重叠的问题,客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武,恒大的惹不起不过尔尔,恒大失去了对其它球队压倒性的优势,能力下降是恒大霸主地位有所动摇的根源所在。
  </div>
</div> 

  clearQueue():对被选元素移除所有排队的函数(仍未运行的)。

我们也可以加如具体时间取值。具体如下:

给img元素绑定点击事件。

  delay():对被选元素的所有排队函数(仍未运行)设置延迟。

slow(1000);
这样代表时间完全显示出元素的时间间隔为1000毫秒

$(function() {
  $('div.caption img').click(function () {
 //先找到img的父级元素,再找该父级元素的子元素
 var $body = $(this).closest('div.module').find('div.body');
 if ($body.is(':hidden')) {
   $body.show();
 } else {
   $body.hide();
 }
  });
});

  dequeue():运行被选元素的下一个排队函数。

2.不透明度函数
fadeIn();//逐渐显示元素(只增加不透明度)
fadeOut();//逐渐隐退元素

运行效果如下图所示:

  fadeln():逐渐改变被选元素的不透明度,从隐藏到可见。

3.高宽度函数
slideDown();//逐渐增加元素高度(只增加元素高度)
slideUp();//逐渐缩短元素高度

betway必威官网 1

  fadeOut():逐渐改变被元素的不透明度,从可见到隐藏。

二.自定义动画函数
animate(params,speed,callback);
params:取值为一个样式属性和取值的映射
speed:速度
callback:动画完成时的执行函数

切换元素的显示状态,还可以用toggle方法。

  fadeTo():把被选元素逐渐改变至给定的不透明度。

其中params的样式属性取值可以是多个属性,也可以是累增,累减的取值
例子:

$(function() {
  $('div.caption img').click(function () {
 $(this).closest('div.module').find('div.body').toggle();
  });
});

  hide():隐藏被选的元素。

复制代码 代码如下:

以上是没有动画效果的,有时候感觉会很唐突。实际上,show,hide,toggle方法都可以有动画效果。比如:

  queue():显示被选元素的排队函数。

$(function(){
$(#id1).click(function(){
$(this).animate({left:"+=500px",height:"200px"},3000,function(){
$(this).css("border","5px solid blue")
})
})
})

$(function() {
  $('div.caption img').click(function () {
 $(this).closest('div.module').find('div.body').toggle('slow');
  });
});

  show():显示被选的元素。

1.停止元素动画
stop();
结束当前执行的动画,并立即执行下面定义的动画

又比如:

  slideDown():通过调整高度来滑动显示被选元素。

2.判断是否在动画状态
is(":animate")

$(function() {
  $('div.caption img').click(function () {
 $(this).closest('div.module').find('div.body').toggle('slow', function() {
   $(this).closest('div.module').toggleClass('rolledup', $(this).is(':hidden'))
 });
  });
}); 

  slideToggle():对被选元素进行滑动隐藏和滑动显示的切换。

3.其他动画函数
toggle(speed,callback);//立即切换元素状态(高,宽,不透明度),如果隐藏则切换到显示,如果显示则切换的隐藏
sildeToggle(speed,callback);//改变高度方式切换元素状态
fadeto(speed,opacity,callback);切换到指定的不透明度值

2.使元素淡入淡出

  slideUp():通过调整高度来滑动隐藏被选元素。

您可能感兴趣的文章:

  • 用js实现的模拟jquery的animate自定义动画(2.5K)
  • Jquery实现带动画效果的经典二级导航菜单
  • JQuery动画和停止动画实例代码
  • 利用JQuery动画制作滑动菜单项效果实现步骤及代码
  • jquery动画1.加载指示器
  • 不用jQuery实现的动画效果代码
  • jQuery 动画弹出窗体支持多种展现方式
  • jquery 经典动画菜单效果代码
  • jquery animate 动画效果使用说明
  • Jquery 自定义动画概述及示例
fadeIn(speed, callback)    
fadeOut(speed, callback)
fadeTo(speed, opacity, callback)

  stop():停止在被选元素上运行的动画。

3.上下滑动元素

  toggle():对被选元素进行隐藏和显示的切换。

slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)

  animate():

本文由betway必威官网发布于计算机网络,转载请注明出处:对被选成分的具有排队函数(仍未运转)设置延

关键词: