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