Javascript 鼠标悬停时在图像元素上放置jquery动画

我正试图整理我的图像，以便在鼠标悬停时抖动。下面是我正在测试的内容，单击会将整个div向左移动。然而，我想要的是在每一张图片的鼠标上，它们都会摆动

任何帮助和建议都是甜蜜的

        HTML 

        <div class="top-header"class="page-header">
            <h1>Smile Board</h1>
          </div>
          <div class="container">

            <div class="row">

              <div class="col-lg-12">
              </div>

              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                  <img  class="img-responsive" src="./images/image01.png" alt="">
                </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                  <img class="img-responsive" src="./images/image02.png" alt="">
                </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                  <img class="img-responsive" src="./images/image03.png" alt="">
                </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                  <img class="img-responsive" src="./images/image04.png" alt="">
                </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                  <img class="img-responsive" src="./images/image05.png" alt="">
                </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                  <img class="img-responsive" src="./images/image06.png" alt="">
                </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                  <img class="img-responsive" src="./images/image07.png" alt="">
                </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                  <img class="img-responsive" src="./images/image08.png" alt="">
                </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                  <img class="img-responsive" src="./images/image01.png" alt="">
                </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                  <img class="img-responsive" src="./images/image02.png" alt="">
                </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                  <img class="img-responsive" src="./images/image03.png" alt="">
                </a>
              </div>
              <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                  <img class="img-responsive" src="./images/image04.png" alt="">
                </a>
              </div>
            </div>

JS

---

请参阅下面的代码片段

$（文档）.ready（函数（）{
$（“img”）.on（'mouseover'，function（）{
$（“div”）.animate（{height:“300px”}）；
});
});
正文{
字体家族：'Baloo Bhaina'，草书；
}
@介质（最小宽度：1200px）
.集装箱{
宽度：1170px；
}
h1{
文本对齐：居中；
}
.页眉{
背景色：#8AFFC1；
填充顶部：20px；
宽度：1130px；
}
.顶部标题{
宽度：1130px；
背景色：#8AFFC1；
填充顶部：20px；
宽度：1290px；
}
.sub{
/*背景色：#EFEC86*/
填充顶部：20px；
}
img{
宽度：100%；
高度：自动；
显示：块；
溢出：自动；
}
.缩略图{
宽度：250px；
高度：270px；
溢出：自动；
/*最大宽度：计算（150%-10px）*/
}
.行{
右边距：50px；
左边距：-15px；
}

微笑板
您是否考虑过使用纯CSS和关键帧？如果是这样的话，那么看看这个链接，它将解释…使用javascript对于类似的东西也很好，但是在我看来，对于这样小的东西，CSS也很好

如何实现摆动？javascriptamazing@Alex Spencer中有鼠标悬停事件
    body {
      font-family: 'Baloo Bhaina', cursive;

    }

    @media (min-width: 1200px)
    .container {
      width: 1170px;
    }


    h1 {
      text-align: center;
    }

    .page-header {
      background-color: #8AFFC1;
      padding-top: 20px;
      width: 1130px;
    }

    .top-header {
      width: 1130px;
      background-color: #8AFFC1;
      padding-top: 20px;
      width: 1290px;
    }

    .sub {
      /*background-color: #EFEC86;*/
      padding-top: 20px;
    }

    img {
      width: 100%;
      height: auto;
      display: block;
      overflow: auto;
    }

    .thumbnail {
      width: 250px;
      height: 270px;
      overflow: auto;
      /*max-width:calc(150% - 10px);*/

    }

    .row {
      margin-right: 50px;
      margin-left: -15px;
    }

$(document).ready(function(){
  $("img").click(function(){
    $("div").animate({right: '250px'});
  });
});