jQuery DIV層の収縮展開効果を実現
7269 ワード
マウスが1つの位置に浮かぶと、この浮遊イベントがアニメーションをトリガーし、jQueryが実現するアニメーションは全体的な効果の流れを美しくすることができます.
<head>
<title>jQuery DIV - title>
<meta charset="utf-8">
<script src="C:/jquery/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8">script>
<style>
.text{
line-height:22px;
padding:0 6px;
color:#666;
}/* div */
.box h1{
padding-left:10px;
height:22px;
line-height:22px;/*line-heigt height ， */
background:#f1f1f1;
font-weight:bold;
}
.box{
position:relative;
border:1px solid #e7e7e7;/* ， */
}
style>
head>
<body>
<script type="text/javascript">
//
$(document).ready(function(){
$(".box h1").hover(function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");/*.animate() jQuery ， ， DOM CSS ， */
}
,
function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
});
});
script>
<div class="box">
<h1> h1>
<div class="text">
<span>only for test span><br />
<span>only for test span><br />
<span>only for test span><br />
<span>only for test span><br />
<span>only for test span><br />
div>
div>
<br />
div>
<br>
body>
html>