媒体查询后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

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

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

<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，将您想要显示的 CSS 更改为 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;
    }
}

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

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

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

FIDDLE

Answer 2

这里需要用到回调

示例：

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