【问题标题】:Fade background-image to another background-image将背景图像淡入另一个背景图像
【发布时间】:2017-07-31 10:31:53
【问题描述】:

抱歉,这似乎是 Stack 上类似问题的重复。
我发现了很多关于淡入淡出背景图像或用悬停改变它们的问题,但这并不完全适合我的需要。我只是想让它看起来像正在淡出的 loading.gif(设置为 background-image)。

我尝试使用此堆栈问题here 中的代码和建议。

我已经制作了一个 JSFiddle 来处理我的代码,但由于我不是专业开发人员,所以我的 jQuery 经验和知识充其量还可以,我无法让它工作。

对此的任何帮助将不胜感激。 JS 菲德:https://jsfiddle.net/tsruxyan/1/

【问题讨论】:

  • 您正在使用 getElementById 但在您的 HTML 中您正在使用一个类
  • 啊,谢谢。有没有办法按类获取元素? @杰拉德

标签: jquery css background-image transition fade


【解决方案1】:

我真的不明白你想要做什么以及如何改变背景或其他任何事情,你可以通过 jQuery $(elemnt).addClass 为你的元素添加一个类,然后在它的 css 代码中使用动画,最后删除回调函数中的类。

【讨论】:

  • 感谢您的评论。我真的希望 gif 的背景图像在加载页面时淡出到opacity:0。我试图通过使用 jQuery 中的 .jpg 来掩盖它来做到这一点。赋予它淡出的效果。 @ARASH
【解决方案2】:

问题是您没有在 JsFiddle 中包含 jQuery 作为外部资源。这就是为什么你不能在其中调用 jQuery 函数的原因。

我不确定你想要实现什么,但如果你添加 jQuery,你可以简单地添加另一个(隐藏的)背景,使用 .fadeOut() 淡出第一个背景,然后使用 @ 显示第二个背景图像987654324@ 在第一个动画完成后立即显示另一个背景。

这可能是这样的:

$( "#clickme" ).click(function() {


  $( ".library-layout" ).fadeOut( "slow", function() {

    //Fade out ready, time to fade in the other image
    $( "#other-img" ).toggle( "slow", function() {
    // Animation complete.
        });
  });
});

概念证明是here

【讨论】:

  • 感谢您的评论。我真的希望 gif 的背景图像在页面加载时淡出到opacity:0。我试图通过使用 jQuery 中的 .jpg 来掩盖它来做到这一点。赋予它淡出的效果。 @NilsSchluter
  • @Robin.83 更像这样? jsfiddle.net/tsruxyan/5 或者你想让加载指示器留在屏幕上,因为在这个版本中加载指示器也会消失
  • 我希望图像保持在屏幕上,并且加载指示器淡出。 @NilsSchluter
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-09
  • 1970-01-01
相关资源
最近更新 更多