【Google Site】Jquery animate練習

繼前幾天的fadeto,今天來個變形動態,娛樂一下~

html部分同樣來個基調四色,這次的控制class同樣設定成 .box
<div class="box blue"></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>


Javascript用animate來做動態效果~
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script&gt <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
ps.如果你是用IE瀏覽器,請你馬上關閉此網頁,否則二十秒內會自動爆炸。(Boooom)

這個網誌中的熱門文章

【Google Site】iframe簡單嵌入.swf

【Google Site】用html小工具做出marqueer效果