我有一个jQuery代码,当你点击它时会震动我的#div。代码有效,但是当你点击div时它不会停留在同一个地方。
如何让我的div保持在初始位置?
<div id="strings">
<div id="se" style="cursor:pointer;"></div>
<div id="sa" style="cursor:pointer;"></div>
<div id="sd" style="cursor:pointer;"></div>
<div id="sg" style="cursor:pointer;"></div>
<div id="sh" style="cursor:pointer;"></div>
<div id="see" style="cursor:pointer;"></div>
</div>
jQuery的:
$.fn.shake = function() {
this.each(function(i) {
$(this).css({ "position" : "relative" });
for (var x = -55; x <= 3; x++) {
$(this).animate({ top: -2 }, 10).animate({ top: 0 },
50).animate({ bottom: 25 }, 10).animate({ bottom: 0 }, 50);
}
});
return this;
}
$("#se, #sa, #sd, #sg, #sh, #see").click(function() {
$(this).shake();
});
的CSS:
#strings {
position: relative;
width: 600px;
bottom: 110px;
left: 223px;
z-index: 2;
}
#se {
position: relative;
bottom: 15.5px;
background-color: red;
height: 2px;
-webkit-transform: rotate(0.6deg);
-moz-transform: rotate(0.6deg);
-o-transform: rotate(0.6deg);
writing-mode: lr-tb;
}
#sa {
position: relative;
bottom: 10.5px;
background-color: red;
height: 2px;
-webkit-transform: rotate(0.3deg);
-moz-transform: rotate(0.3deg);
-o-transform: rotate(0.3deg);
writing-mode: lr-tb;
}
#sd {
position: relative;
bottom: 4px;
background-color: red;
height: 2px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
writing-mode: lr-tb;
}
#sg {
position: relative;
top: 2.5px;
background-color: red;
height: 2px;
-webkit-transform: rotate(-0.3deg);
-moz-transform: rotate(-0.3deg);
-o-transform: rotate(-0.3deg);
writing-mode: lr-tb;
}
#sh {
position: relative;
top: 7.5px;
background-color: red;
height: 2px;
-webkit-transform: rotate(-0.7deg);
-moz-transform: rotate(-0.7deg);
-o-transform: rotate(-0.7deg);
writing-mode: lr-tb;
}
#see {
position: relative;
top: 13.5px;
background-color: red;
height: 2px;
-webkit-transform: rotate(-1.2deg);
-moz-transform: rotate(-1.2deg);
-o-transform: rotate(-1.2deg);
writing-mode: lr-tb;
}