【jQuery】动画特效

最新推荐文章于 2023-08-10 16:36:12 发布

Tina要当程序媛

最新推荐文章于 2023-08-10 16:36:12 发布

阅读量370

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/bengdiaomo4977/article/details/54666582

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、显示和隐藏元素
show()、hide()
例：

$(‘div.caption img’).click(function(){
        var  body$=$(this).closest(‘div.module’).find(‘div.body’);  //找出相关的主体
        if(body$.is(‘:hidden’)){
          body$.show();
}
else{
  body$.hide();
}
});

切换元素的显示状态——toggle()
上例可以修改为：$(‘div.caption img’).click(functio{(this).closest(‘div.moudle’).find(‘div.body’).toggle();
})；
二、动画改编元素的显示状态
1、渐变地显示和隐藏元素
hide(speed,callback)
参数：speed——用于指定特效持续的时间，可以是若干毫秒，也可以是“slow、normal、fast”。如果缺省，则不会产生动画，立即从显示器上删除。
callback——函数，当动画结束时调用。不向此函数传递任何参数，但是将this设置为执行动画的元素。
show(speed,callback)——如果不带参数调用，则设置元素的display样式属性值为一个合适的值（block或inline），使操作瞬间完成。
toggle(speed,callback)——在任何隐藏的包装元素上执行show()，同时在任何非隐藏的包装元素上执行hide()。
toggle(condition)——基于传入条件的运算结果显示和隐藏匹配的元素。如果为true，则显示；false，则隐藏。
例：
正常状态下模块标题CSS为：

div.module div.caption{
  background: black url(‘module.caption.backg.png’);
}

添加另一规则，只要父模块拥有rolledup类，第二个规则就会改变标题栏的背景图片。

div.module.rolledup div.caption{
  background: black url(‘module.caption.backg.rolledup.png’);
}

则为了改变显示效果，需要在适当的时间点添加或删除模块的rolledup类。

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

2、使元素淡入和淡出
fadeIn(speed,callback)——通过将元素的不透明度提高到其初始值来使所有匹配的隐藏元素显示出来。这个值要么是最初应用到元素的不透明度，要么是100%。
fadeout(speed,callback)——通过将元素的不透明度降低到0%，来从显示器上删除任何显示的匹配元素。
fadeTo(speed,opacity,callback)——逐渐改变包装元素的不透明度，从它们的当前值到opacity指定的新值。不会从显示器上删除元素。
opacity——范围0.0—1.0
3、上下滑动元素
slideDown(speed,callback)——通过逐渐增加元素的垂直尺寸来使所有匹配的隐藏元素显示出来。好像从顶部滑落。
slideUp(speed,callback)——通过逐渐减少元素的垂直尺寸来从显示器上删除匹配的显示元素。
slideToggle(speed,callback)——在任何隐藏的元素上执行slideDown()，在任何显示的元素上执行slideUp()。
4、停止动画
stop(clearQueue,gotoEnd)——停止匹配集元素上正在进行的所有动画
clearQueue——（布尔）true，则不仅停止当前动画，而且停止在动画队列中正在等待执行的其他动画
gotoEnd——（布尔）true，则使当前动画执行到其逻辑结束（而不是仅仅停止动画）
注：可以使用一个全局标志来完全禁用所有的动画。
三、创建自定义动画
animate(properties,duration,easing,callback)
animate(properties,options)——将properties和easing参数指定的动画应用到包装集中的所有成员上。
参数：properties——（对象）一个散列对象，指定动画结束时所支持的CSS样式应该达到的值。通过调整元素样式属性的当前值到此散列对象中指定的值来产生动画。
duration——指定特效持续的实际，可以是若干毫秒，也可以是slow、normal或fast。缺省则为0，无动画过程。
easing——用于指定动画缓动特效。缓动函数必须通过名称来注册，通常由插件提供。
options——使用一个散列对象来指定动画参数值，支持的属性有：duration、easing、complete（动画完成时调用的函数）、queue（如果为false，则动画立即运行，无需排队）、step（在动画的每一步都会调用的回调函数）。
1、自定义缩放动画

$(‘.animateMe’).each(function(){  //遍历每一个匹配元素
$(this).animate({
    width:$(this).width*2,
    width:$(this).height*2
},
2000     //设定持续时间
);
});

2、自定义掉落动画

$(‘.animateMe’).each(function(){
  $(this)
.css(‘position’,’relative’)
.animate(
  {
    opacity:0,
    top:$(wondow).height - $(this).height() - $(this).position().top
},
‘slow’,
function(){$(this).hide();}
)
})

3、自定义消散动画

$(‘.animateMe’).each(function(){
  var  position=$(this).position();
  $(this)
.css({position: ‘absolute’,
   top: position.top,
   left: position.left})
.animate(
{
  opacity: ’hide’,
  width: $(this).width()*5,
  height: $(this).height()*5,
  top: position.top – ($(this).height()*5/2),
  left: position.left – ($(this).width()*5/2)
},
‘normal’);
});

四、动画和队列
1、并发的动画
注：动画在页面运行时不会阻塞代码的执行！
2、将函数排队执行
queue(name)——根据传入的名称查找建立在匹配集中第一个元素上的任意队列，并以函数数组的形式返回。
queue(name,function)——将传入的函数添加到匹配集中所有元素的命名队列的末尾。如果不存在该队列，则创建一个。
queue(name,queue)——把匹配元素上现有的任意队列替换为传入的队列

<html>
<head>
  <link rel="stylesheet" type="text/css" href="" />
  <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
  <script src="js/jquery-1.12.0.min.js"></script>
  <script type="text/javascript">
      $(function(){
        $('img').queue('chain',function(){say('First:'+$(this).attr('alt'));});
        $('img').queue('chain',function(){say('Second:'+$(this).attr('alt'));});
        $('img').queue('chain',function(){say('Third:'+$(this).attr('alt'));});
        $('img').queue('chain',function(){say('Fourth:'+$(this).attr('alt'));});
        $('button').click(function(){
            $('img').dequeue('chain');
        });
      });
  </script>
</head>
<body>
<div>
  <img src='' alt="Earth"/>
  <img src='' alt="Moon" />
</div>
<button type="button" class="green90X24">Duqueue</button>
<div id="console"></div>
</body>
</html>

清除没有执行的队列函数：
clearQueue(name)——从命名队列中删除所有未执行的函数
延迟队列函数：
delay(duration,name)——延迟队列中下一个函数的执行，不会延迟所有未执行的函数。
duration——延迟时间，可以是若干毫秒，也可以是fast或slow。
3、插入函数到特效队列

$(“img[alt=’moon’]”).animate({left: ‘+256’},2500);
$(“img[alt=’moon’]”).queue(‘fx’,
  function(){
$(this).css({‘backgroundColor’: ‘black’});
$(this).dequeue(‘fx’);
}
);
$(“img[alt=’moon’]”).animate({left: ‘-256’},2500);