运用JQ点击按钮让一张图片隐藏和显示 

下面是一个简单显示隐藏代码，主要是点击时按钮的变化和图片的手风琴式的显示效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery介绍/jq/jquery-1.11.3.js"></script>
<script>
     $(function () {
         $(":input").on('click',function () {
             if ($("img:hidden").length){
                 $("input").val("隐藏")
                 $("img").slideDown(2000)                        //slideDown显示
             }else {
                 $("input").val("显示")
                 $("img").slideUp(2000,function () {
                     alert("可以接着执行")
                 })                      //slideUp隐藏
             }
         })
     })
</script>
</head>
<body>
<input type="button" value="点击">
<img src="../例子/01/img/3.jpg" width="760"/></body>
</html>
posted @ 2017-09-22 09:20  寒雁  阅读(2361)  评论(0)  编辑  收藏  举报