jQuery动画和AJAX基础知识

最新推荐文章于 2023-01-06 10:31:03 发布

「已注销」

最新推荐文章于 2023-01-06 10:31:03 发布

阅读量2w

点赞数 1

分类专栏：前端设计基础文章标签： jquery

本文链接：https://blog.csdn.net/abc701110/article/details/104713511

版权

文章目录

一、jQuery的显示和隐藏（动画效果）

https://www.w3school.com.cn/jquery/jquery_ref_effects.asp

1、show()、hide()、toggle():

方法	描述
show()	显示被选的元素
hide()	隐藏被选的元素
toggle()	对被选元素进行隐藏和显示的切换


<head>
    <meta charset="UTF-8">
    <title>JQuery的显示和隐藏</title>

</head>
<body>
<div class="box">content</div>
<button id="btnShow">显示</button>
<button id="btnHide">隐藏</button>
<button id="btnToggle">切换</button>
</body>

<script>
    $('#btnShow').bind('click',function () {
    
           $('.box').show('slow',showCallback);
       })

       function showCallback(){
    
           alert('显示完毕！');
       }

       
       $('#btnHide').bind('click',function () {
    
           $('.box').hide(1500,function () {
    
               alert('隐藏完毕！');
           });
       })
      
       
       $('#btnToggle').bind('click',function () {
    
           $('.box').toggle();
       })
</script>

2、fadeIn()、fadeOut():

方法	描述
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏


<script type="text/javascript">
$(document).ready(function(){
    
  $(".btn1").click(function(){
    
  $("p").fadeOut(1000);
  });
  $(".btn2").click(function(){
    
  $("p").fadeIn(1000);
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2