Jquery中使用show()与hide()方法动画显示和隐藏图片

下面是Jquery中使用show()与hide()方法动画显示和隐藏图片的详细攻略：

1. 简介

Jquery是一款前端开发常用的Javascript框架，它封装和简化了Javascript编程的常用功能。其中，show()与hide()是Jquery中常用的方法之一，用来改变元素的可见性是否隐藏。在显示和隐藏图片时，show()和hide()方法都十分实用，可以帮助我们控制网页的动态效果。

2. show()方法

show()方法可以用于显示被隐藏的元素，它的语法如下：

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

其中，selector参数表示要显示的元素，speed参数表示动画展示的速度，可以取fast、slow或者在毫秒数内设置。callback参数是在动画完成后执行的函数，可选。

示例1：
我们可以使用下面的代码展示一个被隐藏的图片：

<img id="hideimg" src="hideimg.png" style="display:none">
<button id="showbtn">显示图片</button>

$("#showbtn").click(function(){
    $("#hideimg").show("slow");
});

效果：点击按钮后，图片将以缓慢的速度显示出来。

示例2：
我们还可以使用show()方法将图片恢复到最初的状态：

<img id="img" src="img.png">
<button id="hidebtn">隐藏图片</button>

$("#hidebtn").click(function(){
    $("#img").hide(2000,function(){
        $("#img").show(2000);
    });
});

效果：点击按钮后，图片会缓慢消失，再以缓慢的速度重新显示出来。

3. hide()方法

hide()方法可以用于隐藏元素，它的语法如下：

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

其中，selector参数表示要隐藏的元素，speed参数表示动画展示的速度，可以取fast、slow或者在毫秒数内设置。callback参数是在动画完成后执行的函数，可选。

示例1：
我们可以使用下面的代码展示一个正常显示的图片，点击按钮后隐藏它：

<img id="img" src="img.png">
<button id="hidebtn">隐藏图片</button>

$("#hidebtn").click(function(){
    $("#img").hide("fast");
});

效果：点击按钮后，图片以快速的速度隐藏起来。

示例2：
我们还可以使用hide()方法将图片隐藏并在指定时间段后再次显示：

<img id="img" src="img.png">
<button id="hidebtn">隐藏图片</button>

$("#hidebtn").click(function(){
    $("#img").hide(2000,function(){
        $("#img").show(2000);
    });
});

效果：点击按钮后，图片会缓慢消失，2秒后以缓慢的速度重新显示出来。

4. 总结

本文介绍了如何使用Jquery中的show()和hide()方法来轻松地动画显示和隐藏图片，其语法简单易懂，可以根据实际需要轻松自定义动画速度和效果，可以在网页中制造出令人印象深刻的动态效果。