這篇文章主要講解了如何實現jQuery常用特效，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
顯示與隱藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#content{display: none;}
</style>
<script src="jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$('#btn').click(function(event) {
if ($(this).text() === '顯示說明') {
$('#content').show();
//$('#content').show('slow');//設置顯示速度，1000為一秒，也可以用fast或slow
//$('#content').show('slow',function() {
//$('h4').css('color','red');
//});//設置顯示完成后的回調函數
$(this).text('隱藏說明');
} else {
$('#content').hide();
$(this).text('顯示說明');
}
});
});
</script>
</head>
<body>
<img src="images/logo.jpg" alt='logo' >
<div>
<p id="content">百度logo，埃里克森上放聲大哭就會發生放聲大哭肌膚時受到了飛機上的法律手段無可奈何花落去</p>
</div>
<div >
<button type="button" name="button" id="btn">顯示說明</button>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#content{display: none;}
</style>
<script src="jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
//1、淡入
$('#fadeIn').click(function(event) {
$('#group1 img:first').fadeIn('slow');
$('#group1 img:eq(1)').fadeIn('fast');
$('#group1 img:last').fadeIn(3000,function() {
alert('淡入');
});
});
//2、淡出
$('#fadeOut').click(function(event) {
$('#group2 img:first').fadeOut('slow');
$('#group2 img:eq(1)').fadeOut('fast');
$('#group2 img:last').fadeOut(3000,function() {
alert('淡出');
});
});
//3、淡入/淡出結合
$('#fadeToggle').click(function(event) {
$('#group3 img:first').fadeToggle('slow');
$('#group3 img:eq(1)').fadeToggle('fast');
$('#group3 img:last').fadeToggle(3000,function() {
alert('淡入/淡出結合');
});
});
//4、設置褪色級別
$('#fadeTo').click(function(event) {
$('#group4 img:first').fadeTo('slow',0.6);
$('#group4 img:eq(1)').fadeTo('fast',0.4);
$('#group4 img:last').fadeTo(3000,0.2,function() {
alert('圖片褪色');
});
});
});
</script>
<style>
#group1 img{display: none;}
</style>
</head>
<body>
<div id="group1">
<button type="button" name="button" id="fadeIn">淡入</button>
<img src="images/1.png" alt="">
<img src="images/2.png" alt="" width="100px">
<img src="images/3.png" alt="">
</div>
<div id="group2">
<button type="button" name="button" id="fadeOut">淡出</button>
<img src="images/1.png" alt="">
<img src="images/2.png" alt="" width="100px">
<img src="images/3.png" alt="">
</div>
<div id="group3">
<button type="button" name="button" id="fadeToggle">淡入/淡出自動</button>
<img src="images/1.png" alt="">
<img src="images/2.png" alt="" width="100px">
<img src="images/3.png" alt="">
</div>
<div id="group4">
<button type="button" name="button" id="fadeTo">設置褪色級別</button>
<img src="images/1.png" alt="">
<img src="images/2.png" alt="" width="100px">
<img src="images/3.png" alt="">
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑動效果</title>
<style>
#wrap img{width: 100px;}
/*#content {width: 100px;display: none;}*//*向下滑動*/
</style>
<script type="text/javascript"></script>
<script src="jQuery/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
//1、向下滑動
$('#wrap img').bind('click',function() {
// $('#content').slideDown('slow');
$('#content').slideDown('slow',function(event) {
$('#wrap img').fadeOut('slow',function(event) {
$(this).attr('src','images/3.png').fadeIn('slow');
});
});
});
//2、向上滑動
$('#wrap img').bind('click',function() {
// $('#content').slideUp('slow');
$('#content').slideUp('slow',function(event) {
$('#wrap img').fadeOut('slow',function(event) {
$(this).attr('src','images/3.png').fadeIn('slow');
});
});
});
//3、展開與收起切換
$('#wrap img').bind('click',function() {
// $('#content').slideToggle('slow');
$('#content').slideToggle('slow',function(event) {
$('#wrap img').fadeOut('slow',function(event) {
if ($(this).attr('src') == 'images/3.png') {
$(this).attr('src','images/2.png').fadeIn('slow');
} else {
$(this).attr('src','images/3.png').fadeIn('slow');
}
});
});
});
});
</script>
</head>
<body>
<div id='wrap'>
<div id='content'>
<h4>百度</h4>
<p>要?？怂沟胤剿伎季突貜拓蕹秋h飄㱒發生糾紛還是葉</p>
</div>
<img src="images/2.png" alt="百度">
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫</title>
<style>
img{width: 0;opacity: 0;}
.content{display: none;}
</style>
<script src="jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btn').click(function(event) {
$('img').before('<br>');
//當按鈕內容為顯示時，修改按鈕內容，顯示圖片和說明
if ($(this).text() == '顯示') {
$(this).text('隱藏');
$('img').animate({//動畫屬性對象（必選）
width:200,//屬性必須是css屬性，只支持數字型，不支持字體顏色
opacity:1,//屬性值單位：默認為px
},{//動畫選項屬性（可選）
duration:3000,
complete:function(event) {
$('.content').slideDown(3000);
}
});
} else {//當按鈕內容為隱藏時，修改按鈕內容，隱藏圖片和說明
$(this).text('顯示');
$('img').animate({//動畫屬性對象（必選）
width:0,
opacity:0,
},{//動畫選項屬性（可選）
duration:3000,
complete:function(event) {
$('.content').slideUp(3000);
}
});
}
});
});
</script>
</head>
<body>
<button type="button" name="button" id="btn">顯示</button>
<img src="images/2.png" alt="baidu">
<div class="content">
<p>富士康地方就是看適當放寬了；收款方式斯洛伐克但是</p>
</div>
</body>
</html>看完上述內容，是不是對如何實現jQuery常用特效有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
