Loading...

使用jquery animate達到動態效果

Temperature: 0 °C

ChungChung
首先..雖然在寫系統時常常會用到jquery 但並沒有針對他的指令有做太深入的研究...

剛好這一次客戶有這樣的需求....為了捨棄Flash所以需要用jquery animate實現一些動態效果...

客戶的需求說明如下
動態說明:
1.兩個瓶身各從左右兩旁滑進來、兩行文案各從上下滑進
2.兩旁的小物件(泡泡、花朵、蝴蝶)從瓶身兩旁飛出,定位後上下左右微微飄浮
3.滑鼠移到任一產品→畫面再往左或右移10-20%、另一產品打朦成前後景→點選連結至(產品介紹)

在這裡先用了div區塊來代表每一個元件...

p01和p02分別代表左右要滑進來的產品...

s01到s06則是泡泡、花朵、蝴蝶這些小元件

在css部份
#p01{background-color:#09F; position:absolute; left:0; z-index:999;}//定意產品1一開始位置
#p02{background-color:#930; position:absolute; right:0; z-index:999;}////定意產品2一開始位置

#p01,#p02{//產品1跟產品2一開始設定為透明
opacity: 0;
filter: alpha(opacity=0); /* For IE8 and earlier */
}
#s01,#s02,#s03,#s04,#s05,#s06{//元件1到6一開始也設定為透明
opacity: 0;
filter: alpha(opacity=0); /* For IE8 and earlier */
}

.blur {//滑鼠移入產品時必須將另一個產品模糊
-webkit-filter: blur(5px); /* Chrome, Opera */
-moz-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.default{//若沒移入滑鼠的預設值
width:350px; height:400px;
top:200px;
}
.s_default{width:50px; height:50px; margin:0 auto; position:relative;}

接著是body間的內容
<div style="padding-top:200px; text-align:center">
<div id="p01" class="default">
<div id="p02" class="default">
<div id="s01" style="background-color:#F60; top:50px; z-index:0" class="s_default">
<div id="s02" style="background-color:#63C; top:0px;z-index:1" class="s_default">
<div id="s03" style="background-color:#3C0; top:-50px;z-index:2" class="s_default">
<div id="s04" style="background-color:#0C9; top:-100px;z-index:3" class="s_default">
<div id="s05" style="background-color:#F3C; top:-150px;z-index:4" class="s_default">
<div id="s06" style="background-color:#9CF; top:-200px;z-index:5" class="s_default">


再來是javascript部份...一開始讓產品由左右2邊滑入到畫面中間指定位置...
並且將小元件從畫面中間向四周散開...
先載入jquery.min.js...
$(document).ready(function () {

$('#p01').animate({opacity:1,left:"25%"},3000);
$('#p02').animate({opacity:1,right: "25%"},3000);

$('#s01').animate({opacity: 1,right: "28%",top: "-=50px",width:"50px",height:"50px" },1000);
$('#s02').animate({opacity: 1,left: "35%",top: "+=20px",width:"50px",height:"50px"},1000);
$('#s03').animate({opacity: 1,right: "30%",top: "+=60px",width:"50px",height:"50px"},1200);
$('#s04').animate({opacity: 1,left: "28%",top: "+=90px",width:"80px",height:"80px"},1000);
$('#s05').animate({opacity: 1,right: "40%",top: "+=150px",width:"70px",height:"70px"},900);
$('#s06').animate({opacity: 1,left: "40%",top: "+=250px",width:"70px",height:"70px"},900);

});

接著讓散開的小元件持續上下飄動...
$(document).ready(function sss() {//讓動畫重覆動作

$('#s01').animate({top: "0px"}, "slow");$('#s01').animate({top: "+=8px"}, "slow");

$('#s02').animate({top: "0px"}, "slow");$('#s02').animate({top: "+=8px"}, "slow");

$('#s03').animate({top: "0px"}, "slow");$('#s03').animate({top: "+=8px"}, "slow");

$('#s04').animate({top: "0px"}, "slow");$('#s04').animate({top: "+=8px"}, "slow");

$('#s05').animate({top: "0px"}, "slow");$('#s05').animate({top: "+=8px"}, "slow");

$('#s06').animate({top: "0px"}, "slow");$('#s06').animate({top: "+=8px"}, "slow");

setTimeout(sss,1000);

});

接著讓滑鼠移入單1產品後..另一價個產品模糊掉

/* 建立 onload 事件 */
$(function(){
$("#p01").mouseover(function(){
$('#p01').animate({opacity: 1,left: "23%",top:"-=50px",width:"380px",height:"434px" },600);
$('#p02').animate({opacity: 1,right: "23%",top:"-=30px",width:"320px",height:"366px" },600);
$('#p02').removeClass('default').toggleClass('blur').fadeIn('fast');

});

$("#p01").mouseout(function(){
$('#p01').animate({opacity: 1,left: "25%",top:"+=50px",width:"350px",height:"400px" },600);
$('#p02').animate({opacity: 1,right: "25%",top:"+=30px",width:"350px",height:"400px" },600);
$('#p02').removeClass('blur').toggleClass('default').fadeIn('fast');
});

$("#p02").mouseover(function(){
$('#p02').animate({opacity: 1,right: "23%",top:"-=50px",width:"380px",height:"434px" },600);
$('#p01').animate({opacity: 1,left: "23%",top:"-=30px",width:"320px",height:"366px" },600);
$('#p01').removeClass('default').toggleClass('blur').fadeIn('fast');

});

$("#p02").mouseout(function(){
$('#p02').animate({opacity: 1,right: "25%",top:"+=50px",width:"350px",height:"400px" },600);
$('#p01').animate({opacity: 1,left: "25%",top:"+=30px",width:"350px",height:"400px" },600);
$('#p01').removeClass('blur').toggleClass('default').fadeIn('fast');
});
});

但目前所有物件出現的時間點是一樣的...因此對物件設定了出現的延遲時間...在一開始的地方

$(function(){
$('#p01').delay(700).fadeIn(3000);
$('#p02').delay(700).fadeIn(3000);
$('#s01').delay(4200).fadeIn(2000);
$('#s02').delay(4200).fadeIn(2000);
$('#s03').delay(4200).fadeIn(2000);
$('#s04').delay(4200).fadeIn(2000);
$('#s05').delay(4200).fadeIn(2000);
$('#s06').delay(4200).fadeIn(2000);

});

這樣就先完成初部的動態...接下來還得細修讓整個動作是更流暢的......

後話...其實覺得用這樣的方式並不會是最洽檔...想應該有更方便好用的方法....

目前的方式只是將jquery animate最基礎的一些動作加以組合成客戶要的變化而已....


測試位置連結網址
https://innstory.com/story-使用jquery_animate達到動態效果-314

Prev
 PHP數字轉國字

Next
2015除夕夜 

About the Author

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

#有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

PHP 利用phpmailer 寄信...

PHP 利用phpmailer 寄信...

一般來說其實PHP本身已經提供了Mail()函數可以使用,但由於一些令人不愉快的原因....

PDO連接Mysql方式 MVC上應用

PDO連接Mysql方式 MVC上應用

pexelsphoto 將連結資料庫的方式加入model function...

Android Studio 2.3 陽春型計算機進階版

Android Studio 2.3 陽春型計算機進階版

andrio 將之前的陽春型計算機用了不怎麼聰明的方式改善了幾個地方。 首先,我將數字...

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format