jQuery里面隐藏和显示效果怎么写?

Posted 2023-03-13

jQuery里面隐藏和显示效果怎么写?

1、jquery.show()和jquery.hide()方法

语法：

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

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

2、jquery.toggle()方法

语法：

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

3、带有淡入淡出效果的显示和隐藏

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeToggle(speed,callback)

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

4、带有滑动效果的显示和隐藏

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

注意：

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

参考技术A 通过 jQuery，可以使用以下方法来隐藏和显示 html 元素：
1、 hide() 和 show() 方法
$(document).ready(function()
$("#hide").click(function()
$("p").hide();
);
$("#show").click(function()
$("p").show();
);
);
</script>
2、通过 toggle() 方法来切换 hide() 和 show()
$(document).ready(function()
$("button").click(function()
$("p").toggle();
);
);
3、通过display="none"或者display="block"方法来显示隐藏功能

$("#id").css('display','none');//隐藏
$("#id").css('display','block');//显示 参考技术B 具体的代码就不说了，有很多方法进行隐藏和显示，看你想怎么隐藏，比如show()和hide()，这个是不占位隐藏。另外可以通过js改写css的display为none或visible为hidden，区别在于display:none不占位，visible:hidden占位。 参考技术C <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
$("#hide").click(function()
$(".id").hide();
);
$("#show").click(function()
$(".id").show();
);
);
</script>
<a id="hide">隐藏</a> <a id="show">显示</a>
<div class="id">显示隐藏内容</div>
最简单的显示隐藏效果案例，可以对代码进行扩展。 参考技术D $('类名或者ID名').css('display','none'); css隐藏
$('类名或者ID名').css('display','block'); css显示

$('类名或者ID名').hide（） JQ 隐藏
$('类名或者ID名').show（） JQ显示

$().toggle(); 显示或者隐藏