jQuery动画特效实例教程

前端技术 2023/09/01 JavaScript

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

1.自制折叠内容块

内容块如下：

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

给img元素绑定点击事件。

$(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();
 }
  });
});

运行效果如下图所示：

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

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

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

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

又比如：

$(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\'))
 });
  });
});

2.使元素淡入淡出

fadeIn(speed, callback)    
fadeOut(speed, callback)
fadeTo(speed, opacity, callback)

3.上下滑动元素

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

4.停止动画

stop(clearQueue, gotoEnd)

5.创建自定义动画

animate(properties, duration, easing, callback)

$(\'.classname\').animate({opacity:\'toggle\'},\'slow\')

如果写一个扩展函数。

$.fn.fadeToggle = function(speed){
  return this.animate({opacity:\'toggle\'},\'slow\');
}

6.自定义缩放动画

$(\'.classname\').each(function(){
  $(this).animate({
    width: $(this).width() * 2,
    height: $(this).height() * 2
  });
});

7.自定义掉落动画

$(\'.classname\').each(function(){
  $(this)
    .css(\"position\",\"relative\")
    .animate({
      opacity: 0,
      top: $(window).height() - $(this).height() - $(this).position().top
    },\'slow\',function(){ $(this).hide(); })
});

8.自定义消散动画

$(\'.classname\').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\');
});

9.队列中的动画

//动画插入队列
$(\'img\').queue(\'chain\', function(){});
$(\'img\').queue(\'chain\', function(){});
$(\'img\').queue(\'chain\', function(){});
$(\'img\').queue(\'chain\', function(){});

$(\'button\').click(function(){
  $(\'img\').dequeue(\'chain\'); //删除队列中的动画
})

cleaeQueue(name)//删除所有未执行的队列中的动画
delay(duration, name)//为队列中所有未执行的动画添加延迟

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

本文地址：https://www.stayed.cn/item/2994

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案