365体育备用网址报道jQuery 效果_365体育备用网址官网资讯

jQuery 能够创建隐藏、显示、切换、滑动以及自定义动画等效果。

亲自试一试

请试一下这个 jQuery 效果:

365jz - 领先的 Web 技术教程站点

在 365jz,你能够找到你所需要的一切网站建设教程。

请点击这里

实例

HTML/diy_html.PHP?filename=jquery_hide">jQuery hide()
演示简单的 jQuery hide() 函数。
jQuery hide()
另一个 hide() 演示。如何隐藏部分文本。
jQuery slideToggle()
演示简单的 slide panel 效果。
jQuery fadeTo()
演示简单的 jQuery fadeTo() 函数。
jQuery animate()
演示简单的 jQuery animate() 函数。

jQuery 隐藏和显示

通过 hide() 和 show() 两个函数,jQuery 撑腰对 HTML 元素的隐藏和显示:

实例

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

亲自试一试

hide() 和 show() 都能够设置两个可选参数:speed 和 callback。

语法:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

speed 参数规定显示或隐藏的速度。能够设置这些值:"slow", "fast", "normal" 或毫秒。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习浩博国际有关 callback 参数的知识。

实例

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

亲自试一试

jQuery 切换

jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。

隐藏显示的元素,显示隐藏的元素。

语法:

$(selector).toggle(speed,callback)

speed 参数能够设置这些值:"slow", "fast", "normal" 或 毫秒。

实例

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

亲自试一试

callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习浩博国际有关 callback 参数的知识。

jQuery 滑动函数 - slideDown, slideUp, slideToggle

jQuery 拥有以下滑动函数:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speed 参数能够设置这些值:"slow", "fast", "normal" 或毫秒。

callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习浩博国际有关 callback 参数的知识。

slideDown() 实例

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

亲自试一试

slideUp() 实例

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

亲自试一试

slideToggle() 实例

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

亲自试一试

jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()

jQuery 拥有以下 fade 函数:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

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

speed 参数能够设置这些值:"slow", "fast", "normal" 或 毫秒。

fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。

callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习浩博国际有关 callback 参数的知识。

fadeTo() 实例

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

亲自试一试

fadeOut() 实例

$("button").click(function(){
$("div").fadeOut(4000);
});

亲自试一试

jQuery 自定义动画

jQuery 函数创建自定义动画的语法:

$(selector).animate({params},[duration],[easing],[callback])

关键的参数是 params。它定义发生动画的 CSS 属性。能够同时设置多个此类属性:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是:"slow", "fast", "normal" 或毫秒。

实例 1

<script type="text/JavaScript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script> 

亲自试一试

实例 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script> 

亲自试一试

HTML 元素默认是静态定位,且无法移动。

如需使元素能够移动,请把 CSS 的 position 设置为 relative 或 absolute。

jQuery 效果 - 来自本页

函数 描述
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).toggle() 切换(在隐藏与显示之间)被选元素
$(selector).slideDown() 向下滑动(显示)被选元素
$(selector).slideUp() 向上滑动(隐藏)被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
$(selector).fadeIn() 淡入被选元素
$(selector).fadeOut() 淡出被选元素
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
$(selector).animate() 对被选元素执行自定义动画

如需完整的参考手册,请访问我们的 jQuery Effect 参考手册

------分隔线----------------------------

公布评论 (93人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换明仕亚洲娱乐场官网
最新评论