JQuery UI如何制作顏色動畫

工具/材料

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比金壇網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式金壇網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋金壇地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。

SublimeText

先打開SublimeText，然后在編輯器中添加HTML5頁面，如下圖所示，由于頁面中中文，所以編碼需要設(shè)置成utf-8的格式

接下來需要下載Jquery UI的庫文件，并且在HTML中導(dǎo)入JqueryUI的樣式庫文件，如下圖所示

由于顏色動畫特效需要JS腳本控制，所以需要導(dǎo)入Jquery的腳本和Jquery ui的腳本，如下圖所示。因為Jquery ui是用jquery編寫的，所以先導(dǎo)入Jquery文件

然后在body標(biāo)簽中添加一個div和一個按鈕。Div標(biāo)簽是我們要操作的顏色塊，按鈕用來觸發(fā)動畫操作，如下圖所示

接下來在頁面中添加style標(biāo)簽，并為上面設(shè)置的div顏色塊來添加樣式，如下圖所示

然后在script標(biāo)簽中添加我們腳本代碼，如下圖所示，通過調(diào)用animate方法進(jìn)行動畫調(diào)用，它可以直接指定顏色塊的背景顏色

最后，我們運(yùn)行頁面程序，你會在頁面中看到一個顏色塊和一個按鈕，點(diǎn)擊按鈕以后，顏色塊發(fā)生變化了，如下圖所示

JQUERY的動畫animate代碼怎么控制它的速度

1、首先雙擊打開HBuilderX工具，新建一個HTML5頁面，并引入jquery文件，如下圖所示。

2、在body/body標(biāo)簽元素內(nèi)，插入一個label和button，如下圖所示。

3、保存代碼并打開瀏覽器，預(yù)覽頁面效果結(jié)果出現(xiàn)報錯。

4、檢查代碼發(fā)現(xiàn)，按鈕點(diǎn)擊事件，調(diào)用animate，這里的樣式屬性需要使用駝峰結(jié)構(gòu)。

5、再次保存代碼并在瀏覽器查看打印結(jié)果，結(jié)果發(fā)現(xiàn)animated不是函數(shù)。

6、返回到HBuilderX工具，修改代碼animate，這樣就完成了。

jQuery實(shí)現(xiàn)切換頁面過渡動畫效果

直接為大家介紹制作過程，希望大家可以喜歡。

HTML結(jié)構(gòu)

該頁面切換特效的HTML結(jié)構(gòu)使用一個main元素來作為頁面的包裹元素，div.cd-cover-layer用于制作頁面切換時的遮罩層，div.cd-loading-bar是進(jìn)行ajax加載時的loading進(jìn)度條。

main

div

class="cd-index

cd-main-content"

div

h1Page

Transition/h1

!--

your

content

here

--

/div

/div

/main

div

class="cd-cover-layer"/div

!--

this

is

the

cover

layer

--

div

class="cd-loading-bar"/div

!--

this

is

the

loading

bar

--

CSS樣式

該頁面切換特效中使用body::before和body::after偽元素在頁面切換過程中創(chuàng)建兩個遮罩層來遮住頁面內(nèi)容。它們的定位是固定定位，高度等于50vh，寬度為100%。默認(rèn)情況下，使用CSS

transform屬性將它們隱藏起來（translateY(-100%)/translateY(100%)）。當(dāng)用戶切換頁面的時候，這些元素被移動回視口當(dāng)中（通過在body元素上添加.page-is-changing

class）。

下面的圖片演示了這個過程：

頁面切換特效

body::after,

body::before

{

/*

these

are

the

2

half

blocks

which

cover

the

content

once

the

animation

is

triggered

*/

height:

50vh;

width:

100%;

position:

fixed;

left:

0;

}

body::before

{

top:

0;

transform:

translateY(-100%);

}

body::after

{

bottom:

0;

transform:

translateY(100%);

}

body.page-is-changing::after,

body.page-is-changing::before

{

transform:

translateY(0);

}

頁面切換時，頁面內(nèi)容的淡入淡出效果是通過改變div.cd-cover-layer的透明度實(shí)現(xiàn)的。它覆蓋了.cd-main-content元素，并具有相同的背景色，然后在body被添加.page-is-changing

class的時候，將透明度從0修改為1。

Loading進(jìn)度條使用.cd-loading-bar::before偽元素來制作。默認(rèn)它被縮小（scaleX(0)）和transform-origin:

left

center。當(dāng)頁面切換開始時它被使用scaleX(1)放大會原來的尺寸。

.cd-loading-bar

{

/*

this

is

the

loading

bar

-

visible

while

switching

from

one

page

to

the

following

one

*/

position:

fixed;

height:

2px;

width:

90%;

}

.cd-loading-bar::before

{

/*

this

is

the

progress

bar

inside

the

loading

bar

*/

position:

absolute;

left:

0;

top:

0;

height:

100%;

width:

100%;

transform:

scaleX(0);

transform-origin:

left

center;

}

.page-is-changing

.cd-loading-bar::before

{

transform:

scaleX(1);

}

特效中平滑的過渡效果使用CSS

Transitions來實(shí)現(xiàn)。每一個動畫元素都被添加了不同的transition-delay，以實(shí)現(xiàn)不同的元素動畫順序。

JAVASCRIPT

該頁面切換特效中在鏈接上使用data-type="page-transition"屬性，用于觸發(fā)頁面切換事件。當(dāng)插件檢測到用戶點(diǎn)擊事件，changePage()方法將被執(zhí)行。

$('main').on('click',

'[data-type="page-transition"]',

function(event){

event.preventDefault();

//detect

which

page

has

been

selected

var

newPage

=

$(this).attr('href');

//if

the

page

is

not

animating

-

trigger

animation

if(

!isAnimating

)

changePage(newPage,

true);

});

這個方法會觸發(fā)頁面切換動畫，并通過loadNewContent()方法加載新內(nèi)容。

function

changePage(url,

bool)

{

isAnimating

=

true;

//

trigger

page

animation

$('body').addClass('page-is-changing');

//...

loadNewContent(url,

bool);

//...

}

當(dāng)新的內(nèi)容被加載后，會替代原來main元素中的內(nèi)容。.page-is-changing

class被從body中移除，新加載的內(nèi)容會被添加到window.history中（使用pushState()方法）。

function

loadNewContent(url,

bool)

{

var

newSectionName

=

'cd-'+url.replace('.html',

''),

section

=

$('div

class="cd-main-content

'+newSectionName+'"/div');

section.load(url+'

.cd-main-content

*',

function(event){

//

load

new

content

and

replace

main

content

with

the

new

one

$('main').html(section);

//...

$('body').removeClass('page-is-changing');

//...

if(url

!=

window.location){

//add

the

new

page

to

the

window.history

window.history.pushState({path:

url},'',url);

}

});

}

為了在用戶點(diǎn)擊瀏覽器的回退按鈕時觸發(fā)相同的頁面切換動畫效果，插件中監(jiān)聽popstate事件，并在它觸發(fā)時執(zhí)行changePage()函數(shù)。

$(window).on('popstate',

function()

{

var

newPageArray

=

location.pathname.split('/'),

//this

is

the

url

of

the

page

to

be

loaded

newPage

=

newPageArray[newPageArray.length

-

1];

if(

!isAnimating

)

changePage(newPage);

});

JQuery中常用的動畫方法有哪些？并簡述他們的特點(diǎn)

animate()

對被選元素應(yīng)用“自定義”的動畫

clearQueue()

對被選元素移除所有排隊的函數(shù)（仍未運(yùn)行的）

delay()

對被選元素的所有排隊函數(shù)（仍未運(yùn)行）設(shè)置延遲

dequeue()

運(yùn)行被選元素的下一個排隊函數(shù)

fadeIn()

逐漸改變被選元素的不透明度，從隱藏到可見

fadeOut()

逐漸改變被選元素的不透明度，從可見到隱藏

fadeTo()

把被選元素逐漸改變至給定的不透明度

hide()

隱藏被選的元素

queue()

顯示被選元素的排隊函數(shù)

show()

顯示被選的元素

slideDown()

通過調(diào)整高度來滑動顯示被選元素

slideToggle()

對被選元素進(jìn)行滑動隱藏和滑動顯示的切換

slideUp()

通過調(diào)整高度來滑動隱藏被選元素

stop()

停止在被選元素上運(yùn)行動畫

toggle()

對被選元素進(jìn)行隱藏和顯示的切換

jquery 加載動畫效果怎么做

有個很簡單的方法

首先載入jquery

script?src="

之后把body加上style

body?style="display:?none;"

然后添加script事件

script

$(document).ready(function(){

$('body').show(10000);?//?1000等于1秒

});

/script

jQuery動畫特效實(shí)例教程

本文以實(shí)例形式詳細(xì)講述了jQuery動畫特效的實(shí)現(xiàn)方法。分享給大家供大家參考之用。具體方法如下：

1.自制折疊內(nèi)容塊

內(nèi)容塊如下：

div

class="module"

div

class="caption"

span標(biāo)題/span

img

src="rollup.gif"

alt="rollup"

title="rolls

up

this

module"/

/div

div

class="body"

近日，《體壇周報》記者馬德興在接受天津體育頻道《體壇新視野》節(jié)目采訪時表示自己對恒大[微博]的情況比較擔(dān)憂，恒大統(tǒng)治力比上賽季下降了很多，恒大外援存在位置重疊的問題，客場不輸給西悉尼流浪者就是一個可以接受的結(jié)果。該節(jié)目稱恒大聯(lián)賽3連勝勝之不武，恒大的惹不起不過爾爾，恒大失去了對其它球隊壓倒性的優(yōu)勢，能力下降是恒大霸主地位有所動搖的根源所在。

/div

/div

給img元素綁定點(diǎn)擊事件。

$(function()

{

$('div.caption

img').click(function

()

{

//先找到img的父級元素，再找該父級元素的子元素

var

$body

=

$(this).closest('div.module').find('div.body');

if

($body.is(':hidden'))

{

$body.show();

}

else

{

$body.hide();

}

});

});

運(yùn)行效果如下圖所示：

切換元素的顯示狀態(tài)，還可以用toggle方法。

$(function()

{

$('div.caption

img').click(function

()

{

$(this).closest('div.module').find('div.body').toggle();

});

});

以上是沒有動畫效果的，有時候感覺會很唐突。實(shí)際上，show,hide,toggle方法都可以有動畫效果。比如：

$(function()

{

$('div.caption

img').click(function

()

{

$(this).closest('div.module').find('div.body').toggle('slow');

});

});

又比如：

$(function()

{

$('div.caption

img').click(function

()

{

$(this).closest('div.module').find('div.body').toggle('slow',

function()

{

$(this).closest('div.module').toggleClass('rolledup',

$(this).is(':hidden'))

});

});

});

2.使元素淡入淡出

fadeIn(speed,

callback)

fadeOut(speed,

callback)

fadeTo(speed,

opacity,

callback)

3.上下滑動元素

slideDown(speed,

callback)

slideUp(speed,

callback)

slideToggle(speed,

callback)

4.停止動畫

stop(clearQueue,

gotoEnd)

5.創(chuàng)建自定義動畫

animate(properties,

duration,

easing,

callback)

$('.classname').animate({opacity:'toggle'},'slow')

如果寫一個擴(kuò)展函數(shù)。

$.fn.fadeToggle

=

function(speed){

return

this.animate({opacity:'toggle'},'slow');

}

6.自定義縮放動畫

$('.classname').each(function(){

$(this).animate({

width:

$(this).width()

*

2,

height:

$(this).height()

*

2

});

});

7.自定義掉落動畫

$('.classname').each(function(){

$(this)

.css("position","relative")

.animate({

opacity:

0,

top:

$(window).height()

-

$(this).height()

-

$(this).position().top

},'slow',function(){

$(this).hide();

})

});

8.自定義消散動畫

$('.classname').each(function(){

var

position

=

$(this).position();

$(this)

.css({

position:

'absolute',

top:

position.top,

left:position.left

})

.animate({

opacity:

'hide',

width:

$(this).width()*5,

height:

$(this).height()*5

top:

position.top

-

($(this).height()

*

5

/

2),

left:

position.left

-

($(this).width()

*

5

/2)

},'normal');

});

9.隊列中的動畫

//動畫插入隊列

$('img').queue('chain',

function(){});

$('img').queue('chain',

function(){});

$('img').queue('chain',

function(){});

$('img').queue('chain',

function(){});

$('button').click(function(){

$('img').dequeue('chain');

//刪除隊列中的動畫

})

cleaeQueue(name)//刪除所有未執(zhí)行的隊列中的動畫

delay(duration,

name)//為隊列中所有未執(zhí)行的動畫添加延遲

相信本文所述對大家的jQuery程序設(shè)計有一定的借鑒價值。

分享標(biāo)題：jquery動畫,jQuery動畫有什么優(yōu)勢
文章路徑：http://jinyejixie.com/article40/dsdgieo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站維護(hù)、建站公司、移動網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)