使用jQuery on 给指定元素绑定多个事件
2017-02-10 本文已影响6人
小人物的秘密花园
语法
$(selector).on({
event1: function() {},
event2: function() {},
....
eventN: function() {}
});
例子
html:
<div class="circle"></div>
css:
.circle {
width: 100px;
height: 100px;
background: #fefefe;
border: 1px solid rgba(176,176,176,.5);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 5px 10px 0 rgba(122,122,122,.5);
-moz-box-shadow: 5px 10px 0 rgba(122,122,122,.5);
box-shadow: 5px 10px 0 rgba(122,122,122,.5);
-webkit- transition: all .5s;
-moz- transition: all .5s;
transition: all .5s;
margin: 15px;
}
js:
$(function() {
var oClass = $(".circle").on({
mouseover: function() {
$(this).animate({
width: '200px',
height: '200px'},
1000);
},
mouseout: function() {
$(this).animate({width: '100px', height: '100px'}, 1000);
}
});
});
