Loading...

使用jquery animate達到動態效果

Temperature: 0 °C

ChungChung
author_tools

首先..雖然在寫系統時常常會用到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最基礎的一些動作加以組合成客戶要的變化而已....

使用jquery animate達到動態效果
測試位置Url link

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

黑客松Hackathon

黑客松Hackathon

這個星期六日要同朋友去參加一個聚會...黑客松Hackathon... 老實說我根本不知道那是什麼....

Photoshop 曲線文字建置

Photoshop 曲線文字...

Photoshop一直都是很強悍的繪圖軟體。 裡頭的【鋼筆工具】,可以拉貝茲曲線的.... 我剛開始...

PHP的日期時間相減方法之二

PHP的日期時間相減方法之二...

這幾天很忙...忙著寫客戶的系統.. 忙到沒時間亂開其他網站... 忙到沒時間去研究新東西... 忙...

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