jQuery 淡入淡出在媒体查询后不起作用

Question

我的网站上有一个淡入淡出的徽标。如果屏幕尺寸小于特定屏幕尺寸，以下媒体查询会将此图像更改为 css。如果未触发媒体查询，则淡入淡出效果很好。当它是淡入淡出时就不会发生。

HTML

<span class="col-md-6" id="header">
    <a href="/">
        <img src="/share/images/design/logo/desktop.png" title="Home"/>
    <a>
</span>

CSS

@media(max-width: 991px)
{ 
    #header img 
    {
        content: url('/share/images/design/logo/mobile.png');

        display: block;

        margin-left: auto;
        margin-right: auto;
    }
}

Javascript

    $("#header").hide();
    $("#header").fadeIn(750);

我尝试在控制台中执行代码，这似乎有效。尽管在正常刷新时它似乎不起作用。你会如何解决这个问题？

Answer 1

这里需要用到回调

示例：

$("#menu").slideToggle(750, function () {
    $("#header").fadeIn(750);
});

Answer 2

所以您的主要问题是您试图使用 content: 更改徽标的图像路径，其中 1. 仅适用于 :before 和 :after 伪元素和 2 . 不会替换 img.

的图像路径

我假设您想保留 img 标签而不使用 background-image 所以我认为最好的办法是将两个图像添加到具有不同 [=19] 的页面=] 命名并使用媒体查询来显示和隐藏它们：

<img src="http://www.dalthow.com/share/images/design/logo/desktop.png" title="Home"  class="desktop">
<img src="http://www.dalthow.com/share/images/design/logo/mobile.png" title="Home" class="mobile">

接下来，将您不想显示的 CSS 更改为 display:none，而您想要显示的 opacity:0：

#header .mobile{
   display: none;
}

#header .desktop{
   display: block; //add to override media query if user is resizing browser
   opacity: 0;
}

@media(max-width: 991px){ 

    #header .desktop{
        display: none;
    }

    #header .mobile{
      display: block; //add to override media query if user is resizing browser
      opacity: 0;
    }
}

现在您不必使用检查 window 大小检查 jQuery，您只需调用：

$("#header img").animate({"opacity": "1"},750); //same effect as fadeIn

不要忘记删除$("#header").hide();不再需要

FIDDLE

jQuery 淡入淡出在媒体查询后不起作用

jQuery fade not working after media query

html

css

jquery

media-queries