【译】jquery基础教程（jquery fundamentals）——(第六部分)Jquery效果

 

 

Jquery 基础教程

                                           作者Rebecca Murphey

                                           原文链接地址http://jqfundamentals.com/

With contributions by James Padolsey, Paul Irish, and others. See the GitHub repository for a complete history of contributions.

Copyright © 2011

 

 

 

jquery效果

概述

    jquery使你向页面添加简单的效果这件事成为了小事一桩。这种效果可以由内置的设置或者提供一个持续的定制来实现。

    想获得完整的关于jquery效果的细节，请访问http://api.jquery.com/category/effects/.

内置的效果

     经常用到的一些效果大多以方法的形式内置到jquery中：

$.fn.show

    显示被选中的元素

$.fn.hide

    隐藏被选中的元素

$.fn.fadeIn

   渐进的将被选中元素的透明度提升到100%

$.fn.fadeOut

   渐进的将被选中元素的透明度提升到0%

$.fn.slideDown

   通过垂直滑动的方式显示被选中的元素

$.fn.slideUp

  通过垂直滑动的方式隐藏被选中的元素

$.fn.slideToggle

  通过垂直滑动的方式，根据被选择元素是否可见来隐藏或者显示被选中的元素，

例6.1：基本的内置效果运用

$('h1').show();

改变内置效果的持续时间

     除了$.fn.show和$.fn.hide，所有的内置的方法的激发时间默认为400ms。改变效果的持续时间是非常简单的事情。

例6.2：设置效果的持续时间

$('h1').fadeIn(300);      // fade in over 300ms

$('h1').fadeOut('slow');  // using a built-in speed definition

jquery.fx.speeds

   jquery在包含默认速度的Jquery.fx.speeds中有一个对象，即像“slow”和“fast”的设置。

speeds: {

    slow: 600,

    fast: 200,

    // Default speed

    _default: 400

}

    重写或者增加这个对象都是可以的。例如，你想改变效果持续的默认时间，或者你想创建你自己的效果持续时间。

例6.3：将定制的速度定义通过参数传递

jQuery.fx.speeds.blazing = 100;

jQuery.fx.speeds.turtle = 2000;

在效果生效的时候做些什么

    常常你会想在一些效果动画生效的之后执行一些代码——如果你在动画生效之前执行，它会影响动画质量，或者它会移除动画的一部分元素。【定义：回调函数提供了一种方法用来注册你感兴趣的那些将来要发生的事件】在这种情况下，我们将要应答的事件就是动画结束。在回调函数内部，关键字this指向被调用产生效果的元素；就像我们在事件处理器函数中做的那样，通过$(this)把它转换成jquery对象。

例6.4：当动画结束时候运行代码

$('div.old').fadeOut(300, function() { $(this).remove(); });

   注意，如果你的选择结果不会返回任何元素，你的回调函数永远不会执行的！你可以通过检查你的选择结果是否有元素来解决这个问题；如果没问题，直接执行回调函数就好。

例6.5:即使没有元素生成动画，也要执行回调函数

var $thing = $('#nonexistent');

var cb = function() {

    console.log('done!');

};

if ($thing.length) {

    $thing.fadeIn(300, cb);

} else {

    cb();

}

通过$.fn.animate定制效果

   jquery通过$.fn.animate使生成任意的css属性效果成为可能。$.fn.animate方法允许你激活一个设置值或者一个和当前值相关的值。

例6.6：通过$.fn.animate定制效果

$('div.funtimes').animate(

    {

        left : "+=50",

        opacity : 0.25

    },

    300, // duration

    function() { console.log('done!'); // calback

});

注解：

颜色定制不能偶通过$.fn.animate来生成。颜色的生成可以通过颜色控件轻易的实现，我们会在控件一节中详细的讨论这个问题。

容位（easing）

   【定义：容位描述一个效果生效的规范——改变率是否稳定，或者动画持续时间是否有损耗】jquery包含了两个容位的方法：swing和linear。如果你想要更自然的过滤你的动画，有多种容位插件可以选择。

    在jquery1.4中，当你用$.fn.animate方法的时候，可以使用容位的预属性。

例6.7：容位预属性

$('div.funtimes').animate(

    {

        left : [ "+=50", "swing" ],

        opacity : [ 0.25, "linear" ]

    },

    300

);

    想要了解更多关于容位的方法，可以访问http://api.jquery.com/animate/.

管理效果

    jquery提供了几个工具方法，用来管理动画。

$.fn.stop

    阻止运行在当前选择结果上的动画

$.fn.delay

    在运行下一个动画之前等待特定的时间

$('h1').show(300).delay(1000).hide(300);

jquery.fx.off

    如果值正确，就不会对动画进行过滤；元素会被立即设置到目标状态。这个方法在你处理旧浏览器的问题的时候很有用；当然你也可以为你的用户提供这个方法。

练习

   解开隐藏的text

   在你的浏览器中打开/exercises/index.html。用/exercises/js/blog.js文件。你的任务是给页面中博客的章节添加一些交互性。特性如下：

   1.点击在一个div标签（#blog）中的标题会发生垂直滑动出现它的摘要段落的效果。

   2.点击另一个标题会发生垂直滑动出现它的摘要段落，并且垂直滑动隐藏其他摘要段落的效果。

提示：不要忘记:visible选择器

创建下拉目录

    在你的浏览器中打开/exercises/index.html。用/exercises/js/navigation.js文件。你的任务是在页面的顶端给主导航添加下拉目录、

   1.鼠标滑过一个条目的时候，主目录会显示它的子目录条目。

   2.退出主目录，会隐藏它所有的子目录

为了完成这个任务，你可以用$.fn.hover方法来从子目录条目上添加或者移除class来控制是否显示或者隐藏。（/exercises/scc/styles.css中包含为这个效果提供过得hover的class）

创建一个幻灯片放映

   在你的浏览器中打开/exercises/index.html。用/exercises/js/slideshow.js文件。你的任务是建立一个普通的html页面，并通过javascript添加一个幻灯片放映来丰富它。

   1.将#slideshow元素移动到body的顶部

   2.写代码重复循环元素内部的列表条目；淡入一个条目，展示几秒，然后淡出，再淡入下一个……如此循环。

   3.当你循环到列表结尾的时候，从头开始从新执行。

为了进一步的挑战，在幻灯片的下面创建一个导航栏，用来展示有多少个图片，和那个图片正在被浏览。（提示：$.fn.prevAll 对这个挑战会有帮助的）