使用jquery實現圖像交換動畫

Question

我想通過縮略圖實現投資組合部分的動畫，如以下模板所示。

http://ironsummitmedia.github.io/startbootstrap-freelancer/#

我曾計劃通過交換圖片src上的mouseenter（）和鼠標離開使用jQuery以實施（）。

  $(".pictures .thumbnail").mouseenter (function() { 
       $(this).attr("src","glass.png"); 
      }); 

我無法找到存儲鼠標指向的原始縮略圖的src的一種方式，這樣我可以在鼠標離開（）函數中使用它。

縮略圖的html代碼，以防萬一。

<div class = "pictures "> 
      <div class = "container "> 
       <div > 

        <center><b><text>PORTFOLIO</text></b></center> 
       </div> 
       <div class = "pics"> 
        <div class = "column"> 
        <div class = "col-md-4"> 
        <div class = "thumbnail"> 
         <img src = "cabin.png"> 
        </div> 

        <div class = "thumbnail"> 
         <img src = "cake.png"> 
        </div> 
        </div> 
       </div> 
        <div class = "column"> 
        <div class = "col-md-4"> 
        <div class = "thumbnail"> 
         <img src = "circus.png"> 
        </div> 

        <div class = "thumbnail"> 
         <img src = "game.png"> 
        </div> 

        </div> 
        </div> 
        <div class = "column"> 
        <div class = "col-md-4"> 
        <div class = "thumbnail"> 
         <img src = "safe.png"> 
        </div> 

        <div class = "thumbnail"> 
         <img src = "submarine.png"> 
        </div> 
        </div> 

        </div> 
        </div> 
      </div> 
     </div> 

有關如何做到這一點的任何想法？ 在此先感謝！

Answer 1

這會達到預期效果：

$('.pictures .thumbnail img').on('mouseenter mouseleave', function(event){ 
    var originalimage = $(this).attr("src"); 
    $(this).attr("src", $(this).attr("data-src")); 
    $(this).attr("data-src", originalimage); 
}); 

這裏的小提琴：https://jsfiddle.net/gwkyupup/5/

Answer 2

在您的<img>元素上添加data屬性。

<div class="thumbnail"> 
    <img data-src="cabin.png" src="cabin.png" alt="" /> 
</div> 

$(".pictures .thumbnail").mouseenter (function() { 
     $(this).find('img').attr("src","glass.png"); 
}); 

$(".pictures .thumbnail").mouseleave (function() { 
     var $this = $(this); 
     $this.find('img').attr("src", $this.find('img').attr("data-src"); 
});