javascript - easeInOutQuad 淡入

Question

我已经搜索了几个小时，但似乎找不到正确的解决方案。加载后我需要淡入背景图像。加载和 fadeIn() 与我粘贴的代码一起使用，但它是不稳定的。所以我想将 easeInOutQuad 与 fadeIn() 一起使用，看看它是否更平滑。 (它不稳定的原因是因为有其他脚本在同时做其他事情)。我试过这个:

$(".wings-wrapper").fadeIn(2000, 'easeInOutQuad', function(){});

但是没有用。

var backgroundImage = $(currentWing).data("background-url");

        var bgimage = new Image();

        bgimage.src = backgroundImage;       

        $(bgimage).load(function(){

            $(".wings-wrapper").css("background-image","url("+$(this).attr("src")+")").fadeIn(1000);

        });

Answer 1

您似乎希望加载具有淡入效果的图像。

您可以使用 javascript 或 CSS 执行此操作

Javascript:

加载后简单地隐藏图像并使用 fadeIn() 使其再次出现并带有淡入淡出效果。

$(".jsfade").hide(0).delay(500).fadeIn(3000)

其中 .jsfade 是附加到图像的类

CSS:

您还可以使用 CSS 动画来更改图像的不透明度以创建淡入效果。对于具有 .fade 类的图像，

  <img src="image.jpg" class="fade" />

您可以按如下方式定义 css 类

.fade {
    opacity: 1;
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}


@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.fade:hover {
  opacity: 0.5;
  }

更新:

jQuery UI 为show/hide/fadeIn 函数指定了以下签名

.show( [duration,] [easing,] [callback] )

话虽如此，以下是具有不同缓动选项的代码

 $(".jsfade").fadeIn(3000, 'linear')  //WITH LINEAR AS EASING OPTION
 $(".jsfadeEaseinOutQuad").fadeIn(3000,'easeInOutQuad') //with easeInOutQuad as the easing option.

所以，$(".wings-wrapper").fadeIn(2000, 'easeInOutQuad', function(){}); 似乎不起作用的原因是因为您的 内容可能已经可见，因此 fadeIn() 基本上什么都不做。要查看效果，您需要先隐藏元素，然后应用 fadeIn()。

使用 css 属性 display:none 隐藏 .wings-wrapper

这是更新的 plunkr两种方法。