学习基于Jquery的淡入淡出的简单特效

作者：天空2017.05.02来源：Web前端之家浏览：10048评论:0

关键词：JQuery JS

学习基于Jquery的淡入淡出的简单特效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type='text/javascript' src='jquery-1.2.6.min.js'></script> 
<style type="text/css"> 
#gallery1 {width:100%; overflow:hidden;} 
#gallery1 a {position:relative; float:left; margin:5px;} 
#gallery1
 a span { display:none; background-image:url(zoom.png); 
background-repeat:no-repeat; width:48px; height:48px; position:absolute;
 left:15px; top:15px;} 
#gallery1 img { border: solid 1px #999; padding:5px;} 
#gallery1 a:hover span { display:block;} 
#gallery2 {width:100%; overflow:hidden;} 
#gallery2 a {position:relative; float:left; margin:5px;} 
#gallery2
 a span { display:none; background-image:url(zoom.png); 
background-repeat:no-repeat; width:48px; height:48px; position:absolute;
 left:15px; top:15px;} 
#gallery2 img { border: solid 1px #999; padding:5px;} 
</style> 
<script> 
$(document).ready(function(){ 
$("#gallery2 a").append("<span></span>"); 
$("#gallery2 a").hover(function(){ 
$(this).children("span").fadeIn(600); 
},function(){ 
$(this).children("span").fadeOut(200); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="gallery1"> 
<h2>CSS solution</h2> 
<a href="1.jpg"> 
<span></span> 
<img src="1.jpg" alt="" /> 
</a> 
<a href="2.jpg"> 
<span></span> 
<img src="2.jpg" alt="" /> 
</a> 
</div> 
<div id="gallery2"> 
<h2>jQuery solution</h2> 
<a href="1.jpg"> 
<img src="1.jpg" alt="" /> 
</a> 
<a href="2.jpg"> 
<img src="2.jpg" alt="" /> 
</a> 
</div> 
</body> 
</html>

用到的图片：
一个淡入淡出小例子：

<body> 
<form action="" method="post" id ="myform"> 
<button value="Click Me">Click Me</button> 
<p style="background:red;" >context<br>context<br>context<br>context</p> 
</form> 
</body> 
</html>

Jquery代码：

$(document).ready( 
    function() { 
    /*淡入淡出*/ 
    $("button").toggle( 
    function (){ 
    $("p").fadeOut("fast",function(){ 
    } 
    ) 
    }, 
    function (){ 
    $("p").fadeIn("fast",function(){ 
    } 
    ) 
    } 
    ); 
});

赏您的支持是我们创作的动力！