jQuery Effects

翻译 2017年10月13日 14:26:49

jQuery 作用

jQuery Effect Methods 參考

hide() & show()

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});

語法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可選方法參數 speed 該參數指定間隔時間,參數值為: slow fast 或者毫秒值。

可選方法參數 callback 該參數為回調函數,指定 hide() & show() 方法執行完成之後所執行的函數。

$("button").click(function(){
    $("p").hide(1000);
});

toggle()

該方法的效用是在 hide() & show() 方法的效果之間做切換

$("button").click(function(){
    $("p").toggle();
});

語法:

$(selector).toggle(speed,callback);

可選方法參數 speed 該參數指定間隔時間,參數值為: slow fast 或者毫秒值。

可選方法參數 callback 該參數為回調函數,指定 toggle() 方法執行完成之後所執行的函數。

fade

fadeIn() 逐漸顯示

語法:

$(selector).fadeIn(speed,callback);

可選方法參數 speed 該參數指定間隔時間,參數值為: slow fast 或者毫秒值。

可選方法參數 callback 該參數為回調函數,指定 fadeIn() 方法執行完成之後所執行的函數。

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

fadeOut() 逐漸消失

語法:

$(selector).fadeOut(speed,callback);

可選方法參數 speed 該參數指定間隔時間,參數值為: slow fast 或者毫秒值。

可選方法參數 callback 該參數為回調函數,指定 fadeIn() 方法執行完成之後所執行的函數。

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

fadeToggle() 在逐漸顯示或者消失之間切換

語法:

$(selector).fadeToggle(speed,callback);

可選方法參數 speed 該參數指定間隔時間,參數值為: slow fast 或者毫秒值。

可選方法參數 callback 該參數為回調函數,指定 fadeToggle() 方法執行完成之後所執行的函數。

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

fadeTo() 逐漸變為所給定的不透明值所指定的不透明效果,值:0 - 1 之間

語法:

$(selector).fadeTo(speed,opacity,callback);

可選方法參數 speed 該參數指定間隔時間,參數值為: slow fast 或者毫秒值。

必要參數 opacity 該參數指定不透明值:0 - 1 之間。

可選方法參數 callback 該參數為回調函數,指定 fadeTo() 方法執行完成之後所執行的函數。

$("button").click(function(){
    $("#div1").fadeTo("slow", 0.15);
    $("#div2").fadeTo("slow", 0.4);
    $("#div3").fadeTo("slow", 0.7);
});

slide

slideDown() 向下顯示

語法:

$(selector).slideDown(speed,callback);

可選方法參數 speed 該參數指定間隔時間,參數值為: slow fast 或者毫秒值。

可選方法參數 callback 該參數為回調函數,指定 slideDown() 方法執行完成之後所執行的函數。

$("#flip").click(function(){
    $("#panel").slideDown();
});

slideUp() 向上隱藏

語法:

$(selector).slideUp(speed,callback);

可選方法參數 speed 該參數指定間隔時間,參數值為: slow fast 或者毫秒值。

可選方法參數 callback 該參數為回調函數,指定 slideUp() 方法執行完成之後所執行的函數。

$("#flip").click(function(){
    $("#panel").slideUp();
});

slideToggle() 向下顯示或者向上消失之間切換

語法:

$(selector).slideToggle(speed,callback);

可選方法參數 speed 該參數指定間隔時間,參數值為: slow fast 或者毫秒值。

可選方法參數 callback 該參數為回調函數,指定 slideToggle() 方法執行完成之後所執行的函數。

$("#flip").click(function(){
    $("#panel").slideToggle();
});

Animation

語法:

$(selector).animate({params},speed,callback);

必要參數 {params} 用以指定顯示動畫的 CSS 屬性。

可選方法參數 speed 該參數指定間隔時間,參數值為: slow fast 或者毫秒值。

可選方法參數 callback 該參數為回調函數,指定 animate() 方法執行完成之後所執行的函數。

$("button").click(function(){
    $("div").animate({left: '250px'});
});

默認情況下,所有 HTML 元素都是靜態位置,不能被移動。
要操作位置,首先請記得設定該元素 CSS position 屬性為: relative fixed absolute 。

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
});

是否可以使用 animate() 方法,操作所有 CSS 屬性?
幾乎是可以操作 CSS 屬性。但是,請注意:animate() 方法中的 CSS 屬性必須是 camel-cased 方式的。如將此種方式做替換: padding-left 替換為 paddingLeft margin-right 替換為 marginRight 等等。

相對值方式

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
});

預定義方式

$("button").click(function(){
    $("div").animate({
        height: 'toggle'
    });
});

隊列功能動畫方式:相同元素指定多個動畫動作,以一個接一個顯示

$("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
});
$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
});

Stop

stop()

用以停止動畫或 jQuery 效果的執行

語法:

$(selector).stop(stopAll,goToEnd);

可選參數 stopAll 該參數指定是否停止所有動畫隊列的執行。默認值為 false 此時只停止當前活動的動畫執行,而允許隊列中以後的動畫執行。

可選參數 goToEnd 該參數指定在停止執行時是否立即完成當前進行中動畫效果的執行。默認值為 false 所以在默認值的情況下,該方法會殺掉當前正在所選元素上動畫效果動作的執行。

$("#stop").click(function(){
    $("#panel").stop();
});

Callback

回調函數:函數完全執行 100% 之後所調用的函數動作。

$(selector).hide(speed,callback);

// A
$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});

對比代碼

// B
$("button").click(function(){
    $("p").hide(1000);
    alert("The paragraph is now hidden");
});

示例說明:

A 代碼在點擊按鈕之後 p 元素隱藏之後才彈出 alert 窗體。

B 代碼在 點擊按鈕之後立即彈出 alert 窗體,而 p 元素還未隱藏,在關閉 alert 窗體之後 p 元素才會被隱藏。

Chaining

Chaining 技術,允許在同一個元素上執行多個 jQuery 命令。通過這種方式瀏覽器不需多次的尋找所使用的元素。

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
// 避免書寫太長的方式
$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

Fixed Effect简单概念

固定效应((fixed effect)[1]  试验设计的基本概念之一试验中,若因素的水平选取已定好,该因素的水平效应作为固定参数,称此为固定效应。 固定效应((fixed effe...
  • adore1993
  • adore1993
  • 2016年11月23日 14:33
  • 1262

obj-c编程02:给类自动合成存取方法

我们在此篇对obj-cbian
  • mydo
  • mydo
  • 2014年06月28日 13:53
  • 1918

【DirectX11】第四篇 Effects框架

本文为转载文章,这里为原文链接。本文索引:一 什么是Effects 二 Effect文件结构 1 technique11 2 pass 三 如何编译着色器 四 如何创建Effect对象 五 如何使Ef...
  • xueyedie1234
  • xueyedie1234
  • 2016年05月09日 19:50
  • 3108

ShineTime – A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects

This week I’d like to show you how you can create a kick-ass animated Shine Effect with jQuery & C...
  • cangkukuaimanle
  • cangkukuaimanle
  • 2012年04月06日 15:19
  • 1514

【jQuery】jQuery官方基本教程的学习笔记3-动画效果Effects

动画效果详细事件api:http://api.jquery.com/category/effects/ 一、Introduction to Effects---介绍动画效果 1.showing and...
  • skybboy
  • skybboy
  • 2017年12月22日 18:09
  • 43

Unity Shaders and Effects Cookbook (2-1) 修改 UV 坐标实现纹理贴图的滚动 模拟水流效果

昨天加班晚了,困。刚爬起来翻开书学习这一节。这一节是摘抄自Unity Shader and Effect Cookbook 上面的 2.2 节。这书写的简单易懂,每天花一点时间学习一小节,慢慢来。 ...
  • cp790621656
  • cp790621656
  • 2016年03月22日 12:24
  • 2407

Unity3D学习笔记——组件之Effects(效果/特效)——Particle Sy...

Effects:效果/特效。             Particle System:粒子系统。可用于创建烟雾、气流、火焰、涟漪等效果。           ...
  • Carl180
  • Carl180
  • 2015年02月01日 23:26
  • 1437

After_Effects特效软件的英文翻译

Distort扭曲特效 --Bezier warp贝赛尔曲线弯曲 --Bulge凹凸镜 --CC Bend It 区域卷曲效果 --CC Bender 层卷曲效果 --C...
  • lllljz
  • lllljz
  • 2014年04月26日 09:50
  • 2133

《ImageEffects(屏幕特效)官方文档翻译》——编写屏幕特效【Writing Image Effects】

译注:鉴于翻译的混乱情况,将Texture译为纹理(实际上也应该如此),因为纹理和贴图还是有一些区别的。Image Effects是Unity3D中一种进行图像后期渲染的方式。...
  • kevlis
  • kevlis
  • 2016年11月01日 11:27
  • 699

Silverlight 2.5D RPG游戏技巧与特效处理(Game Effects):目录

以当下主流的2.5D RPG客户端品质游戏特效为借鉴,以最大程度控制性能损失为前提,将Silverlight游戏资源占用最小化,综合效果及用户体验最优化,即本系列作者想要向大家讲解的核心技术知识。 ...
  • pizi0475
  • pizi0475
  • 2013年10月17日 08:23
  • 828
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery Effects
举报原因:
原因补充:

(最多只允许输入30个字)