jQuery動畫方法
1、.hover方法
描述：將二個事件函數綁定到匹配元素上，分別當鼠標指針進入和離開元素時被執行。javascript
.hover()方法是同時綁定 mouseenter和 mouseleave事件。咱們能夠用它來簡單地應用在 鼠標在元素上行爲。css
調用$(selector).hover(handlerIn, handlerOut)是如下寫法的簡寫： html
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
下面示例爲模擬鼠標懸停java
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:200px;
height: 200px;
border: 1px solid red;
}
.over{
background-color: yellow;
border: 5px dashed green;
color: blue;
}
.out{
background-color: red;
border: 5px solid yellow;
color: pink;
}
</style>
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<div>這是個有故事的div</div>
</body>
</html>
<script>
$('div').hover(function(){
this.className = 'over';
},function(){
this.className = 'out';
})
</script>
2、動畫方法
jQuery中的動畫效果均可以指定3種速度參數」slow」、」normal」、」fast」，甚至以毫秒爲單位進行添加動畫效果。jquery
1.show()顯示元素與hide()隱藏元素。
示例：點擊標籤，顯示和隱藏divide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>顯示與隱藏</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>點我咯</h3>
<div>這是個有故事的div</div>
</body>
</html>
<script>
var flag = true
$('h3').bind('click',function(){
if(flag){
$(this).next().hide();
}else{
$('div').show();
}
flag = !flag;
})
</script>
2.fadeIn()與fadeOut()淡入淡出方法(顏色變淡最後消失)函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='jquery-3.1.1.js'></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<h3 style="width: 100px;background-color: red">點我看看咯</h3>
<div>這是個有故事的div</div>
</body>
</html>
<script>
var flag = true;
$('h3').click(function(){
if(flag){
$(this).next().fadeOut(5000);
}else{
$('div').fadeIn(5000);
};
flag = !flag;
})
</script>
3.slideUp()和slideDown()滑動方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑動動畫顯示</title>
<link rel="stylesheet" href="donghua.css">
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<h3>點我咯</h3>
<div>梅剛是傻逼</div>
</body>
</html>
<script>
var flag = true;
$('h3').click(function(){
if(flag){
$(this).next().slideUp(3000);
}else{
$('div').slideDown(3000);
}
flag = !flag
})
</script>
Css樣式佈局
*{
margin: 0;
padding:0;
}
div{
background-color: red;
width: 200px;
height: 200px;
position: relative;
}
h3{
background-color: green;
width: 200px;
}
4.animate(params,[speed],[callback])自定義動畫方法
參數說明：
params:一個包含樣式屬性及值的映射
speed:速度參數，可選
callback:動畫完成時執行的函數，可選
注意：使用animate()方法以前，必須將元素的position樣式改成」relative」或」absolute」動畫
animate()方法能夠實現
自定義簡單動畫
累加、累減動畫(經過」+=」或」-=」設置位置)
(按順序執行)多重動畫
利用動畫回調函數實現動畫完成時的設置this
判斷元素是否處於動畫狀態
if(!$(element).is(「:animated」)){
// 若是當前沒有進行動畫，執行的代碼
}
示例1：點擊div,div向右下方移動，並變大，中止後，返回原位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義動畫效果</title>
<script src='jquery-3.1.1.js'></script>
<link rel="stylesheet" href="donghua.css">
</head>
<body>
<div></div>
</body>
</html>
<script>
$('div').click(function(){
$(this).animate({
width:'500px',
height:'500px',
left:'300px',
top:'300px',
},5000,function(){
$(this).animate({
width:'100px',
height:'100',
left:0,
top:0
})
})
})
</script>
示例2：點擊開始按鈕，div向右移動，開始按鈕變爲暫停，點擊移動中的div中止必定，按鈕變爲開始。（自定義動畫累加累減效果實現）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
<title>Document</title>
</head>
<body>
<div></div>
<input type="button" value="開始" id="btn">
</body>
</html>
<script>
$(function(){
$('#btn').click(function(){
var $div = $('div');
if($div.is(":animated")){
$div.stop();
this.value = '開始';
}else{
$('div').animate({left:'+=200px'},3000);
this.value = '暫停';
}
})
})
</script>
五、toggle()方法
切換元素的可見狀態。若是被選元素可見，則隱藏這些元素，若是被選元素隱藏，則顯示這些元素。
show()與hide()方法的簡寫形式
示例：點擊標籤，div顯示或隱藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>點我</h3>
<div>這是個有故事的div</div>
</body>
</html>
<script>
$('h3').click(function(){
$(this).next().toggle(3000); //切換元素的可變狀態
})
</script>
六、slideToggle()方法
slideUp和slideDown簡寫
slideToggle() 方法經過使用滑動效果（高度變化）來切換元素的可見狀態。
若是被選元素是可見的，則隱藏這些元素，若是被選元素是隱藏的，則顯示這些元素。
$(selector).toggle(speed,callback,switch)
speed 可選，規定元素從可見到隱藏的速度，默認0
在設置速度的狀況下，元素從可見到隱藏的過程當中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。若是設置此參數，則沒法使用 switch 參數。
callback 可選。toggle 函數執行完以後，要執行的函數。
switch 可選，布爾值。規定 toggle 是否隱藏或顯示全部被選元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>點我</h3>
<div>這是一個有故事的div</div>
</body>
</html>
<script>
$('h3').click(function(){
$('div').slideToggle(3000); //切換元素可見狀態
})
</script>
7. fadeTo()方法
fadeTo() 方法將被選元素的不透明度逐漸地改變爲指定的值。
語法：
$(selector).fadeTo(speed,opacity,callback)
speed 可選。規定元素從當前透明度到指定透明度的速度。
opacity 必需。規定要淡入或淡出的透明度。必須是介於 0.00 與 1.00 之間的數字。
callback 可選。fadeTo 函數執行完以後，要執行的函數。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>點我</h3>
<div>這是一個有故事的div</div>
</body>
</html>
<script>
$('h3').bind('click',function(){
$(this).next().fadeTo(3000,0.3,function(){
$(this).css('border','3px dashed green');
})
})
</script>
八、fadeToggle()方法
fadeToggle() 方法在fadeIn() 和fadeOut()方法之間切換。
若是元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。
若是元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。
註釋：隱藏的元素不會被徹底顯示（再也不影響頁面的佈局）。
語法：
$(selector).fadeToggle(speed,easing,callback)
speed 可選。規定褪色效果的速度
easing 可選。規定在動畫的不一樣點上元素的速度。默認值爲 "swing"。(可選"linear" - 勻速移動，"swing" - 在開頭/結尾移動慢，在中間移動快)
callvack 可選，fadeToggle() 方法執行完以後，要執行的函數。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="donghua.css">
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<h3>點我</h3>
<div>這是一個有故事的div</div>
</body>
</html>
<script>
$('h3').click(function(){
$(this).next().fadeToggle();
})
</script>
二級菜單聯動效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二級菜單效果</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
div{
width: 20%;
background-color: green;
position: relative;
}
.submenu{
display: none;
}
ul h3{
border: 1px solid red;
}
</style>
<script src='jquery-3.1.1.js'></script>
</head>
<body>
<div>
<ul>
<li>
<h3>美食</h3>
<ul class="submenu">
<li>地鍋雞</li>
<li>皮肚面</li>
<li>饅頭</li>
</ul>
</li>
<li>
<h3>讀書</h3>
<ul class="submenu">
<li>當代青年</li>
<li>皮囊</li>
<li>海子的詩</li>
</ul>
</li>
<li>
<h3>娛樂</h3>
<ul class="submenu">
<li>明星出軌</li>
<li>最新電影</li>
<li>楊冪離婚</li>
</ul>
</li>
</ul>
</div>
<input type="button" value="隱藏" id="btn">
</body>
</html>
<script>
$('h3').hover(function(){
$(this).css('background-color','red')
$(this).next().show(2000);
},function(){
$(this).css('background-color','yellow')
$(this).next().hide(2000);
});
var flag = true;
var div_width = $('div').css('width');//獲取div的寬度
$('#btn').click(function(){
if(flag){
//$('div').css('left','-'+div_width);
$('div').animate({left:'-'+div_width},3000);
this.value = '顯示';
}else{
$('div').animate({left:0},3000);
this.value = '隱藏'
}
flag = !flag;
});
</script>
相關文章
- 1. jquery動畫-animate方法
- 2. Jquery動畫方法 jquery.animate()
- 3. jQuery的animate動畫方法及動畫排隊問題解決
- 4. JQuery動畫
- 5. jquery動畫
- 6. jQuery動畫
- 7. jQuery 之 [ 動畫 ]
- 8. jQuery 動畫
- 9. 【jQuery】之動畫
- 10. JQuery animate動畫
- 更多相關文章...
- • ionic 加載動畫 - ionic 教程
- • jQuery Mobile 表單滑動條 - jQuery Mobile 教程
- • SpringBoot中properties文件不能自動提示解決方法
- • 算法總結-滑動窗口
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jquery動畫-animate方法
- 2. Jquery動畫方法 jquery.animate()
- 3. jQuery的animate動畫方法及動畫排隊問題解決
- 4. JQuery動畫
- 5. jquery動畫
- 6. jQuery動畫
- 7. jQuery 之 [ 動畫 ]
- 8. jQuery 動畫
- 9. 【jQuery】之動畫
- 10. JQuery animate動畫