當鼠標懸停時在圖像元素上放置一個jquery動畫

Question

我想整理掉我的圖像以便在mouseover上擺動。我有以下，我正在測試，點擊將整個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> 

CSS

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; 
    } 

JS

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

Answer 1

請參見下面的代碼片段。

$(document).ready(function(){ 
 
    $("img").on('mouseover', function(){ 
 
    $("div").animate({height: "300px"}); 
 
    }); 
 
});

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; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOLu1xsB5p3fYIGSG06rWNOXau_UJRm5Kx7EqDKibwolZq9U_g" alt=""> 
 
       </a> 
 
       </div> 
 
       
 
      </div>

Answer 2

你有沒有想過用純CSS和關鍵幀？如果是這樣，然後看到這個鏈接，將解釋...使用JavaScript也是這樣的事情也很好，但在我看來，對於這樣小的事情，CSS會很好。

https://css-tricks.com/snippets/css/shake-css-keyframe-animation/