WEB基础之： jQuery 效果

jQuery 效果

• • 1. 滑动
  • 2. 淡入淡出
  • 3. 自定义
  • 4. 设置

• show([speed,[easing],[fn]]): 显示隐藏的匹配元素。

  • $('p').show('show')
    

1. 滑动

• slideDown([speed],[easing],[fn]): 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

  • $("p").slideDown('slow', function(){
       alert("Animation Done.");
     });
    

• slideUp([speed,[easing],[fn]]): 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

  • $('p').slideUp('slow', function () {
      alert('Animation Done.')
    });
    

• slideToggle([speed],[easing],[fn]): 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

  • $('p').slideToggle('slow', function (){
      alert('Animation Done.');
    });
    

2. 淡入淡出

• fadeIn([speed],[easing],[fn]): 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

  • $('p').fadeIn(3000, function () {
      alert('Animation Done.')
    });
    

• fadeOut([speed],[easing],[fn]): 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

  • $('p').fadeOut(3000, function () {
      alert('Animation Done.')
    });
    

• fadeTo([[speed],opacity,[easing],[fn]]): 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。opacity:一个0至1之间表示透明度的数字。

  • $('p').fadeTo(3000, 0.5,  function () {
      alert('Animation Done.');
    });
    

• fadeToggle([speed,[easing],[fn]]): 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

  • $('p').fadeToggle('slow', function () {
      alert('Animation Done');
    });
    

3. 自定义

• animate(params,[speed],[easing],[fn]): 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。

  • 注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

  • 每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

  • $("p").animate({ 
        width: "90%",
        height: "100%", 
        fontSize: "10em", 
        borderWidth: 10
    }, 1000 );
    

• stop([clearQueue],[jumpToEnd]): 停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行

  • $("p").animate({ 
        width: "90%",
        height: "100%", 
        fontSize: "10em", 
        borderWidth: 10
    }, 5000 );
    // 在上个动画运行过程中stop。
    $("p").stop();
    

• delay(duration,[queueName]): 设置一个延时来推迟执行队列中之后的项目。

  • $("p").slideDown(1000).delay(3000).fadeOut(1000);
    

• finish( [queue ] ): 立即完成当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除动画队列，并且停在当前值。.finish()会导致所有排队的动画的CSS属性跳转到他们的最终值。

  • $("P").finish();
    

4. 设置

• jQuery.fx.off: 关闭页面上所有的动画。把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。

  • jQuery.fx.off = true;
    // 以下动画立即执行完毕
    $("p").animate({ 
        width: "90%",
        height: "100%", 
        fontSize: "10em", 
        borderWidth: 10
    }, 5000 );
    

• jQuery.fx.interval: 设置动画的显示帧速（默认值是 13 毫秒），降低这个值能够使动画在更快的浏览器中运行得更流畅。

  • jQuery.fx.interval = 100;