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

<强> Demo

注意 - 我在jsfiddle中覆盖了easeOutCubic函数，因为我无法加载所需的库。

如何为图像切换添加缓动

1 个答案: