今天要和你們分享的是我看了JQuery庫的一款關燈效果，然后自已去實現它.

主要是鼠標移入移出它的狀態發生改變

開始講解前，為大家做一些知識儲備，在接下來的實操中會用到.

1.mouseover( function(){} )方法

鼠標移入，會實現函數里的操作

2.mouseleave(function(){})方法

鼠標移出，會實現函數里的操作

3.parent()方法

獲取到父元素

4.animate()方法

添加動畫

5.children()方法

獲取到子元素

6.siblings()方法

獲取到兄弟元素

7.${this}

表示當前的選擇元素

8.opacity：透明度屬性

9.stop(stopAll,goToEnd)方法 > 重點

stopAll:可為true或false，停止該元素當前所有的animate動作

goToEnd:可為true或false，結束該元素當前的animate動作后停止

接下來分為三個模塊跟大家來講解：

Html模塊

關燈效果//裝圖片的盒子//第一張圖片，接下來以此遞增

Css模塊

body{

background-color: #000000;

position: relative;

}

.wrap{//放圖片盒子的高和寬以及定位，這個盒子wrap絕對定位是把父級的position作為參考的,當前是依據body來移動

//因為body是它的父級，同時帶有position：relative屬性.

width: 624px;

height: 468px;

position: absolute;

top:200px;

left: 34%;

}

.wrap img{ //確定圖片的大小

width: 208px;

height: 156px;

vertical-align: top;

}

.left{

float: left; //圖片向左浮動，可以排在同一行上

}

JQuery模塊

$(function(){

$("div.box").mouseover(function() { //當鼠標移入時，當前box的透明度為1，兄弟元素的透明度變為0.2，耗時0.5秒

$(this).stop(true,false);//停止該元素當前所有的animate動作

$(this).animate({opacity:'1'}).siblings().animate({opacity:'0.2'},500)

});

$(".wrap").mouseleave(function(){//當鼠標移出wrap這個大盒子時，所有的圖片透明度變成1

$("div.box").stop(true,false);//停止該元素當前所有的animate動作

$("div.box").siblings().stop(false,true).animate({opacity:'1'},500)

});

})

這里重點講stop()方法：

如果沒有stop方法，則當前的動畫不會停止，要按順序執行完成后才執行下一步操作，如：

今天的分享就到這里了，我很喜歡羅振宇，更喜歡他所創造的得到APP,這個APP的態度就是要和你一起終身學習，是一種開放的形態，他想與所有的聽眾一起變得更好.

所以我想學習他，希望可以讓看這篇博文的你，也越來越好.

總結

以上是生活随笔為你收集整理的html5实现关灯效果,《第41天：JQurey - 关灯效果》的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。