通过jquery实现鼠标移入移出效果、jQuery中的动画隐藏、显示效果实现

最新推荐文章于 2024-04-26 18:01:53 发布

清如许.

最新推荐文章于 2024-04-26 18:01:53 发布

阅读量6k

点赞数 1

分类专栏：前端技术 JavaWeb入门编程文章标签：通过jquery实现鼠标移入移出效果 jquery实现动画隐藏、显示效果 hide()、show()

本文链接：https://blog.csdn.net/MacWx/article/details/95102037

版权

JavaWeb入门编程同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

前端技术

18 篇文章 0 订阅

订阅专栏

通过jquery实现鼠标移入移出效果

鼠标移入用mouseover方法
鼠标移出用mouseout方法

但是，jquery给我们提供了一个复合事件替换mouseover和mouseout
如下所示：

	<!-- jquery引入到这个jsp里面 -->
	<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	<!-- 我们的jquery代码 -->
	<script type="text/javascript">
	//等页面加载完毕
	$(function(){
		//获取到三个元素，jquery可以直接给三个元素添加事件
		//链式写法
		/*$("h1").mouseover(function(){
			$(this).css("background-color","red");
		}).mouseout(function(){
			$(this).css("background-color","white");
		});*/
		//jquery给我们提供了一个复合事件替换mouseover和mouseout
		$("h1").hover(function(){
			$(this).css("background-color","red");
		},function(){
			$(this).css("background-color","white");
		});
	});
	</script>
  </head>
  
  <body>
    <h1>111</h1>
    <h1>222</h1>
    <h1>333</h1>
  </body>
</html>

jQuery中的动画隐藏、显示效果实现

使用jquery可以做一些很漂亮的动画特效
下面是一个简单的点击问题显示或者隐藏答案的一个案例：

	<!-- 我们的jquery代码 -->
	<script type="text/javascript">
	//等页面加载完毕
	$(function(){
		$("h1").click(function(){
			if($("h1+div").is(":hidden")){
				$("h1+div").show(5000);
			}else{
				$("h1+div").hide(5000);
			}
		});
	});
	</script>
  </head>
  
  <body>
    <h1>什么是jQuery</h1>
    <div class="test" name="div1" style="border:1px solid red;width:200px;">jQuery是一个JavaScript函数库、jQuery极大地简化了JavaScript编程。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery兼容各种主流浏览器。</div>
  </body>
</html>

清如许.

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
通过jquery实现鼠标移入移出效果、jQuery中的动画隐藏、显示效果实现

通过jquery实现鼠标移入移出效果鼠标移入用mouseover方法鼠标移出用mouseout方法但是，jquery给我们提供了一个复合事件替换mouseover和mouseout如下所示：  <script type="text/javascript" src="js/jquery-1.12.4.js">&lt...
复制链接

扫一扫