對單擊事件而言,jQuery一樣提供了動態(tài)交替的toggle()方法,這個方法接受兩個參數(shù),兩個參數(shù)均為監(jiān)聽函數(shù),在click事件中交替使用。
例子:點擊事件的動態(tài)交互。
<script type="text/javascript">
$(function() {
$("#ddd").toggle(
function(oEvent) {
$(oEvent.target).css("opacity", "0.5");
},
function(oEvent) {
$(oEvent.target).css("opacity", "1.0");
}
);
});
</script>
<div id="ddd">11</div>
2.實現(xiàn)鼠標(biāo)感應(yīng)
在css中可以利用:hover偽類實現(xiàn)樣式的改版,實現(xiàn)單獨的css樣式,在jQuery引入后,幾近所有的元素都可以用hover()來感應(yīng)鼠標(biāo)。并且可以制作更復(fù)雜的效果。其本質(zhì)是mouseover和mouseout事件的合并
hover(over,out)方法可接受兩個參數(shù),均為函數(shù)。第1個是鼠標(biāo)移動到元素上面觸發(fā),第2個是鼠標(biāo)移出元素時觸發(fā)。
<script type="text/javascript">
$(function() {
$("#ddd").hover(
function(oEvent) {
//第1個函數(shù)相當(dāng)于mouseover事件監(jiān)聽
$(oEvent.target).css("opacity", "0.5");
},
function(oEvent) {
//第2個函數(shù)相當(dāng)于mouseover事件監(jiān)聽
$(oEvent.target).css("opacity", "1.0");
}
);
});
</script>
<div id="ddd">11</div>
與第1個例子相比,只是把toggle()換成了hover().
受wenzi0_0指點,寫幾個關(guān)于toggle()的小例子
1.常規(guī)的利用
<script type="text/javascript">
$(function() {
$("#ddd").click(function(){
$("#eee").toggle();
});
});
</script>
<div id="ddd">11</div>
<div id="eee">122</div>
2.css屬性
<script type="text/javascript">
$(function(){
$("#eee").toggle(function() {
$("#ddd").css("background-color", "green");
},
function() {
$("#ddd").css("background-color", "red");
},
function() {
$("#ddd").css("background-color", "yellow");
}
);
});
</script>
<div id="ddd">11</div>
<div id="eee">122</div>