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

太过爱你忘了你带给我的痛 2021-12-11 09:45 773阅读 0赞

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

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

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

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    	
    	<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可以做一些很漂亮的动画特效  
**下面是一个简单的点击问题显示或者隐藏答案的一个案例：**

<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>