使用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"); 
});