innstory

使用jquery animate達到動態效果

Temperature: 0 °C

2015-02-16 Chung

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

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

客戶的需求說明如下

動態說明：

1.兩個瓶身各從左右兩旁滑進來、兩行文案各從上下滑進

2.兩旁的小物件(泡泡、花朵、蝴蝶)從瓶身兩旁飛出，定位後上下左右微微飄浮

3.滑鼠移到任一產品→畫面再往左或右移10-20%、另一產品打朦成前後景→點選連結至(產品介紹)

#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;}

<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">

先載入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);



});

/* 建立 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);



});