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，所以我认为最好的办法是将两个图像添加到不同{{1命名并使用媒体查询来显示和隐藏它们：

class

接下来将您想要展示的CSS更改为<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">，将display:none更改为您想要展示的CSS：

opacity:0

现在你不必使用jQuery检查窗口大小检查，你可以打电话：

#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不再需要

FIDDLE

Answer 2

在这里你需要使用回调

示例：

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

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

2 个答案: