使用jquery实现图像交换动画

我想在公文包部分的缩略图上实现动画，如以下模板所示

我计划通过在mouseenter（）和mouseleave（）上使用Jquery交换图像src来实现这一点

我找不到一种方法来存储鼠标指向的原始缩略图的src，以便在mouseleave（）函数中使用它

缩略图的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>

文件夹

有什么办法吗？

---

提前谢谢

在

$（“.pictures.缩略图”）.mouseenter（函数（）{
$（this.find（'img'）.attr（“src”，“glass.png”）；
});
$（“.pictures.缩略图”）.mouseleave（函数（）{
var$this=$（this）；
$this.find（'img'）.attr（“src”），$this.find（'img'）.attr（“data src”）；
});

这将按预期工作：

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

---

问题是：

主题没有使用javascript来实现这一点。我正在尝试自己实现动画。如果要将“src”属性设置为div.缩略图，请参考其

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

$('.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);
});