如何在图像切换中添加缓动

Question

我一直在使用一些jQuery代码，这些代码是我在网上遇到的，可以在单击时切换（切换）图像。 它运作良好。 我在具有大大小小的图像的网页上使用它。 我想简化两者之间的过渡，这太突然了。 我试图使jQuery动画无法正常工作。 如果可能的话，我想使用easeOutCubic函数。 HTML：

    <img id="intro_pic1" class="img-swap" src="/templates/beez_20/images/e2tw/books/wiw/wiw01/pic1_off.png" align="left">   

jQuery的：

      jQuery(".img-swap").on('click', function() {
        if (jQuery(this).attr("class") == "img-swap") {
          this.src = this.src.replace("_off","_on");        
        } else {
          this.src = this.src.replace("_on","_off");
        }
        jQuery(this).toggleClass("on");
      });

我将不胜感激。

Answer 1

首先，删除if条件，因为您已将jQuery选择器用于img-swap并进行了检查。

if (jQuery(this).attr("class") == "img-swap") {

您可以尝试以下方法：

$(".img-swap").click(function() {
    var newSRC = 'off';
    var oldSRC = $(this).attr('src');
    //change src image here
    if(oldSRC.indexOf(newSRC)!=-1)
    {
         newSRC = oldSRC.replace('off','on');
    }

    $(this).slideToggle(
        3000, 
        'easeOutCubic',function(){
         $(this).attr('src',newSRC);
             $(this).slideToggle(
        3000, 
        'easeOutCubic');
     });
});

演示版

注意 -由于无法加载所需的库，我在jsfiddle中重写了easyOutCubic函数。