Web实训知识点 0409

最新推荐文章于 2021-11-13 21:00:38 发布

inmessionante_

最新推荐文章于 2021-11-13 21:00:38 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/inmessionante_/article/details/89285857

版权

jQuery使用
1.关于jQuery隐藏和显示的方法：
(1).:如果被选的元素已被显示，则隐藏该元素。
(2).：当点击元素时，会发生 click 事件。
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。
用代码实现

<script>
    $(document).ready(function(){//jQ入口函数
        $("#button1").click.(function(){
            $("p").hide(500)
            alert("恭喜你，隐藏完成")
        })
    $("#button2").click(function(){
        $("p").show(200,function(){
            alert("恭喜你，显示完成")
          })
        })
        $("#button3").click(function(){
            $("p").show(1000,function(){
                $("p").css({color:"yellow"})
            })
        })
    })
</script>
<body>
<p>jQ动画效果，隐藏和显示</p>
<p></p>
<input type="button" value="隐藏" id="button1">
<input type="button" value="显示" id="button2">
<input type="button" value="按钮" id="button3">
</body>``

``

JQuery动画效果（动画）

<script>
    $(document).ready(function(){
    $("#button").click(function(){
        $("div").animate({life:"200px"},1000,function() {
            $("div").css({background: "yellow"})
            })
        })
    })
</script>
<body>
<button>动画开始</button>
<p></p>
<div style="background-color: red; height: 100px;width: 100px;position: absolute"></div>
</body>

jQuery动画效果（滑动）

 #slide,#panel{
      padding: 5px;
      text-align: center;
      background-color: #33b5e5;
      border: solid 1px red;
  }
  #panel{
      display: none;
      padding: 40px;
  }

inmessionante_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web实训知识点 0409

jQuery使用1.关于jQuery隐藏和显示的方法：(1).:如果被选的元素已被显示，则隐藏该元素。(2).：当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。用代码实现<script> $(document).ready(function(){//jQ入口函数 $("#butto...
复制链接

扫一扫