【Google Site】Jquery animate練習
html部分同樣來個基調四色，這次的控制class同樣設定成 .box
<div class="box blue"></div>
<div class="box red"></div>
<div class="box green"></div>
<div class="box yellow"></div>
<div class="box red"></div>
<div class="box green"></div>
<div class="box yellow"></div>
css部分和上次一樣，僅是上色、排列和寬高。
<style>
.box { width: 100px; height: 100px; padding: 10px; color:white; vertical-align:middle; border: 1px solid #fff; float: left; margin: 5px;}
.blue{ background: #3af;}
.red{ background: red;}
.green{ background: green;}
.yellow{ background: yellow;}
</style>
.box { width: 100px; height: 100px; padding: 10px; color:white; vertical-align:middle; border: 1px solid #fff; float: left; margin: 5px;}
.blue{ background: #3af;}
.red{ background: red;}
.green{ background: green;}
.yellow{ background: yellow;}
</style>
Javascript用animate來做動態效果~
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$('.box').fadeTo('slow',0.6);
$('.box').mouseenter(function(){
$(this).animate({
height: '+=10px'
});
});
$('.box').mouseleave(function() {
$(this).animate({
height: '-=10px'
});
});
});
</script>
實作範例:https://sites.google.com/site/shiyansuo/success/animate-height$(document).ready(function(){
$('.box').fadeTo('slow',0.6);
$('.box').mouseenter(function(){
$(this).animate({
height: '+=10px'
});
});
$('.box').mouseleave(function() {
$(this).animate({
height: '-=10px'
});
});
});
</script>
ps.如果你是用IE瀏覽器，請你馬上關閉此網頁，否則二十秒內會自動爆炸。(Boooom)
