媒体查询后jQuery淡入不工作

我的网站上有一个逐渐消失的徽标。如果低于某个屏幕大小，下面的媒体查询将使用css更改此图像。如果没有触发媒体查询，淡入淡出效果会非常好。当它消失的时候就不会发生了

HTML

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

Javascript

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

---

我试着在控制台中执行代码，这似乎奏效了。虽然在正常刷新时，它似乎不起作用。如何解决此问题？

在这里，您需要使用回调

例如：

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

---

因此，您的主要问题是您试图使用

content:

which 1更改徽标的图像路径。仅适用于

：before

和

：after

伪元素和2。不会替换

img

的图像路径

我假设您希望保留

img

标记，而不使用

背景图像

，因此我认为最好的做法是使用不同的

类

名称将两个图像添加到页面中，并使用媒体查询来显示和隐藏它们：

<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">

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

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

不要忘记删除

$（“#头”）.hide（）这不再需要

你想先完成哪种效果，你需要调用它，然后再调用其他效果这只会使它在滑动切换后褪色，如果你调整屏幕大小，使其带有移动徽标，它仍然不会褪色。为此，你需要在调整窗口大小时处理褪色效果，但。。。双重下载
#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;
    }
}

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