javascript - easyInOutQuad 淡入

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两种方法都可以。