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);

相关文章推荐

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...

Unity Shaders and Effects Cookbook (4-5)Cubemap与菲涅尔反射

当我们站在水中,直直的往下看水面,是看不到反射的太阳光的。而当我们往远处看时,就能看到很强的反光,也就是成语波光粼粼所体现的。这一现象就被命名为 菲涅尔反射。

Unity Shaders and Effects Cookbook (3-4) 使用高光贴图

在学习完上一节之后,已经了解了在Unity 中如何实现一个高光 Shader ,但是会有一个问题,就是效果看起来不切实际,如下面的问题 我用一张图片贴到了Cube上面,然后用了一个高光材...

Unity Shaders and Effects Cookbook (5-1)LitSphere lighting model

光照模型我们已经很熟悉了,之前各种漫反射、高光 都自定义过光照模型函数。我以为这一章讲的会是之前说的光照模型函数,然而却不是。看完第一节,给我的感觉是 这讲的好像是教我 怎么去使用烘培出来的图。就是说...

Unity Shaders and Effects Cookbook (2-4) 压缩和混合纹理贴图:使用灰度图存储插值信息

这一节看了几次才慢慢的读懂。 首先是这个灰度图,为什么叫灰度图,是因为 这个图片中的 R、G、B 存放的都是同一份数据,打开Unity 来调一下颜色看看 更直观。 可以看到,当 R、G...

Effects with the Pixel Bender Toolkit – Part 6: Modifying Pixel Bender parameters in Flash

Requirements User level BeginningRequired products Flash Player 10 and later Flash Professional (Dow...

Unity Shaders and Effects Cookbook (1-5)使用2D渐变纹理模拟BRDF(双向反射分布函数)

BRDF,双向反射分布函数,简单理解为 入射光在不透明物体上,同事反射到观察者方向 和 出射光方向。 转自 http://blog.csdn.net/huutu http://www.thisisg...

Unity Shaders and Effects Cookbook (2-6) 在 C# 代码中创建 Texture2D 并赋值给 Shader

有一些需求 ,比如截屏 然后把你的游戏人物头像 印在截屏图片的左上角。 这就是要在代码中生成一张图片,然后进行修改。 转自http://blog.csdn.net/huutu http://www...

U3D Image Effects实践(1)——去除红色通道

本文将通过一个简单的例子来简述Unity3D中的Image Effects屏幕后期处理特效的过程。

Unity Shaders and Effects Cookbook (1-2)创建自定义漫反射光照模型

创建自定义的光照模型的时候,光照模型的函数名,函数定义 都是有规定的。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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