Jquery，你知多少？(二)

最新推荐文章于 2024-09-29 09:00:00 发布

原创最新推荐文章于 2024-09-29 09:00:00 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用JQuery实现Hide()、Show()、FadeIn()、FadeOut()、SlideUp()、SlideDown()等动画效果，并提供实际代码案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇博客主要说说利用Jquery实现一些效果，在界面的设计上经常要用到各种效果，其实Jquery实现起来非常容易。

一、Hide() 和 Show()

1.Jquery可以使用hide()和show()方法实现html元素的隐藏和显示

实例如下：

<head>
<script src="JQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){  //页面就绪函数
  $("#hide").click(function(){  //id为hide的元素，实现点击事件
  $("p").hide(); //<p>元素实现隐藏方法
  });
  $("#show").click(function(){  //id为show的元素实现鼠标点击事件
  $("p").show();  //<p>元素实现显示方法
  });
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>

2.toggle()方法可以切换hide()和show()方法，显示被隐藏的，隐藏已显示的

实例：

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){ //$("button")等同于$(this)
  $("p").toggle(); //<p>元素执行toggle()方法
  });
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

二、FadeIn() 和 FadeOut()实现淡入淡出

1.FadeIn()方法用于淡入已经隐藏的元素,fadeIn()中的参数可以是："slow","fast"或者毫秒

实例：

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn(); //第一个无参数
    $("#div2").fadeIn("slow"); //第二个慢慢淡入
    $("#div3").fadeIn(3000); //3秒淡入
  });
});
</script>
</head>

<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button>点击这里，使三个矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

2.FadeOut()方法淡出可见元素，参数取值同上

实例：

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>

3.fadeToggle()方法：如果元素已淡入，则此方法添加淡出效果，如果元素已淡出，此方法添加淡入效果，参数同上

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>

三、SlideUp()和SlideDown()

1.slideUp()顾名思义是向上滑动的意思，参数："slow","fast"或者毫秒

实例：

<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});
</script>

2.slideDown()向下滑动

$("#flip").click(function(){
  $("#panel").slideDown();
});

3.slideToggle()方法可以在slideUp()和slideDown之间切换

实例：

$("#flip").click(function(){
  $("#panel").slideToggle();
});

四、animate()

JQuery animate()方法用于创建自定义的动画，可以对left，top值设定一定时间的变化，达到动画效果

实例：

$("button").click(function(){
  $("div").animate({left:'250px'});
});

这些效果的实现非常简单，提高了界面的动态功能，更灵活方便。