jQuery基本動畫toggle()
阿新 • • 發佈：2018-07-17
函數 utf 點擊 set 按鈕 show on() utf-8 fun
今天來學習一下jQuery的基本函數的使用，很簡單。
首先寫一個button做控制按鈕，然後寫一個div用按鈕控制idv做動畫，從而測試JQuery的動畫函數
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style>
div{
width: 100px;
height: 100px;
background: #FA8072;
}
div.bg{
background: #0A8CD2;
}
</style>
</head>
<body>
<button>按鈕</button>
<div class="box bg red"></div>
</body>
接下來就是在script中使用JQuery函數了
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("div").hide();
})
})
</script>
上面的點擊Button就會使div消失。
$("div").show();
使用show()方法的時候 點擊button的時候會使div展現
但是jQuery對象.toggle() 語法同show()和hide()一樣，而且會很簡單，是show()和hide()的互斥方法。
$("div").toggle()
toggle與show()和hide()互斥，如果是隱藏的就顯示如果是顯示的就隱藏。
我們還可以給它加個過度
jQuery基本動畫toggle()