【Google Site】Jquery Fadeto練習

好久沒有做GoogleSite實驗，趁著着週末天光來寫一篇~話說GoogleSite htmlBox原本引入的Jquery版本已經進化到1.8.1，如果還是使用舊有1.6或是1.5的版本，會有畫面消失的情事發生～所以記得要更新一下。#1

進入重點，這篇所呈現的功能大多用在按鈕、照片在滑鼠經過時淡入淡出的動態效果，所以先在html的部分加入<div>。上排單純使用寬高100px的方格來作練習，下排則是作按鈕。

<div class="block">
   <div class="box blue"></div>
   <div class="box red"></div>
   <div class="box yellow"></div>
   <div class="box green"></div>
   <div class="box black"></div>
</div>
<div class="block">
   <div class="box-text blue">Home</div>
   <div class="box-text red">edx</div>
   <div class="box-text yellow">Coursera</div>
   <div class="box-text green">Udacity</div>
   <div class="box-text black">About me</div>
</div>

css的則是單純的用來上色和寬高設定。

<style>
   .block{
   clear:both;
   } 
   .box{
   width:100px;
   height:100px;
   margin:10px 0px 10px 20px;
   float:left;
   border-radius: 5px;
   }
   .box-text{
   margin:10px 0px 10px 20px;
   float:left;
   border-radius: 5px;
   padding:5px 10px;
   color:white;
   }
   .blue{
   background: blue;
   }
   .red{
   background: red;
   }
   .green{
   background: green;
   }
   .yellow{
   background: yellow;
   }
   .black{
   background: black;
   }
</style>

最後的script部分則是用class="box"和class="box-text"來當作觸發的元件，event設定為mouseenter和mouseleave，effect是fadeto。說白話一點就是當 .box 和 .box-text 被滑鼠移入或是移出都會產生fadeto的效果。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script>
   $(document).ready(function(){
    $('.box').fadeTo('slow',0.25);
     $('.box').mouseenter(function(){
           $(this).fadeTo('slow',1);
       });
       $('.box').mouseleave(function(){
           $(this).fadeTo('slow',0.25);
       });
      
     $('.box-text').mouseenter(function(){
           $(this).fadeTo('fast',0.5);
       });
       $('.box-text').mouseleave(function(){
           $(this).fadeTo('fast',1);
       });
   });
</script>

yabe，打完收工。

ps.IE無法顯示，我已經徹徹底底放棄對IE進行除錯，以節省我所剩不多的時間。

#1. google htmlbox update https://support.google.com/sites/answer/2500646?hl=zh-Hant
#2. 實作範例 https://sites.google.com/site/shiyansuo/success/fadeto