需要帮助jQuery摇动代码

时间:2015-06-29 17:50:07

标签: jquery shake

我有一个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;
   }

0 个答案:

没有答案