在名为.img-swap的jQuery .class上添加过渡效果？

Question

<!-- jquery script I'm using -->
<script>
  jQuery(function(){
   $(".img-swap").hover(
      function(){this.src = this.src.replace("_off","_on");},
      function(){this.src = this.src.replace("_on","_off");
   });
  });
</script>

<!-- css3 transition applied to class .img-swap -->
<style>
.img-swap {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
</style>

<!-- HTML5 below with class="img-swap" -->
<div class="container">
  <div class="col-3"><img src="images/thumbnails-1_off.jpg" alt="" class="img-swap"></div>
  <div class="col-3"><img src="images/thumbnails-2.jpg" alt="" class="img-swap"></div>
  <div class="col-3 last"><img src="images/thumbnails-3.jpg" alt="" class="img-swap"></div>
</div><!--end container -->

Answer 1

你可以试试这段代码吗？

$(document).ready(function(){
    $(".img-swap").hover(function(){
        var src = $(this).attr('src');
        $(this).attr('src', src.replace('_off', '_on'));
    });
});