jQuery xiao guo

  • Ìwé tí ó wá
  • Ìwé tí ó kàn

jQuery iya kaiwar daidaita, hanyin, tiaoxuan, hua dong daidaita kai zi yin dong xiao guo.

Fọwọ́ àwọn àìmọye

请试一下这个 jQuery 效果：

CodeW3C.com - 领先的 Web 技术教程站点

在 CodeW3C.com，你可以找到你所需要的所有网站建设教程。

请点击这里

Ƙararruwar shawara

jQuery hide()
演示简单的 jQuery hide() 函数。
jQuery hide()
另一个 hide() 演示。如何隐藏部分文本。
jQuery slideToggle()
演示简单的 slide panel 效果。
jQuery fadeTo()
演示简单的 jQuery fadeTo() 函数。
jQuery animate()
演示简单的 jQuery animate() 函数。

jQuery 隐藏和显示

通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：

Ƙararruwar shawara

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

Fọwọ́ àwọn àìmọye

hide() 和 show() 都可以设置两个可选参数：speed 和 callback。

Girmi:

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

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

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback taɗaɗaɗa na matan.

Ƙararruwar shawara

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

Fọwọ́ àwọn àìmọye

jQuery ƙa'ama da ƙarfi

Fonkili jQuery toggle() ƙa'ama da ƙwararrun show() ko hide() domin kai amfani da yawa ƙarfi ƙarfi ɗin HTML.

Yananta kwanan ƙarfi da yake zubar da kuma yake nuna.

Girmi:

$(selector).toggle(speed,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。

Ƙararruwar shawara

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

Fọwọ́ àwọn àìmọye

callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback taɗaɗaɗa na matan.

jQuery ƙwararrun da ƙarfi - slideDown, slideUp, slideToggle

jQuery ƙa'ama da ƙwararrun da ƙarfi:

$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。

callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback taɗaɗaɗa na matan.

slideDown() 实例

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

Fọwọ́ àwọn àìmọye

slideUp() 实例

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

Fọwọ́ àwọn àìmọye

slideToggle() 实例

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

Fọwọ́ àwọn àìmọye

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 taɗaɗaɗa na matan.

ɗan ɗan ɗiyya na fadeTo()

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

Fọwọ́ àwọn àìmọye

ɗan ɗan ɗiyya na fadeOut()

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

Fọwọ́ àwọn àìmọye

jQuery ɗan ɗan ɗiyya

Ƙirar jQuery don ɗaukar ɗan ɗan ɗiyya.

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

matan da yana da mahimmanci params。an haɗaɗaɗa ce wanda a ɗauka CSS na ɗan ɗan. an ɗaukaɗaɗa ce kuma za a iya ɗauka ɗaukaɗaɗa:

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

matan da farko ce duration。an haɗa ce taɗaɗaɗa ce wanda a ɗauka lokaci na ɗan ɗan. an ɗauka ɗauka ce: "slow", "fast", "normal" ko miliya.

Ìṣe 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>

Fọwọ́ àwọn àìmọye

Ìṣe 2

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

Fọwọ́ àwọn àìmọye

Àwọn àkóónú HTML jẹ́ àwọn àìmọye tí a yàn láti le lọwọ́, kò le lọwọ́.

Fún àwọn àkóónú tí a yàn láti le lọwọ́, fọwọ́ àwọn CSS position sí relative tàbí absolute.

jQuery ìwà - láti ìwé yìí

Ìlànà Ìfihàn
$(selector).hide() Fọwọ́ àkóónú
$(selector).show() Fọwọ́ àkóónú
$(selector).toggle() Ṣí àkóónú
$(selector).slideDown() Fọwọ́ àkóónú
$(selector).slideUp() Fọwọ́ àkóónú
$(selector).slideToggle() Ṣí àkóónú tí a yàn láti fọwọ́ àwọn àìmọye
$(selector).fadeIn() Fọwọ́ àkóónú
$(selector).fadeOut() Fọwọ́ àkóónú
$(selector).fadeTo() Fọwọ́ àkóónú tí a yàn láti fọwọ́ àwọn àìmọye
$(selector).animate() Ṣí àwọn àkóónú tí a yàn láti ṣe àwọn àìmọye àìmọye àwọn àwọn àìmọye

Fún ìwé ìlànà kíkọ̀kọ̀, wá sí Ìwé ìlànà jQuery Effect。

  • Ìwé tí ó wá
  • Ìwé tí ó kàn