试图淡化导航背景只是不链接 [英] Trying to fade Navigation background only not links

问题描述

所以我试图在导航背景中只用jquery淡入淡出，但是当这样做时，它也会使导航链接与导航背景消失。

So I am trying to fade in the navigation background only with jquery but when doing so, It somehow also makes the navigation links to fade out with the navigation background.

这是我的代码：

if ($(this).scrollTop() > 200) {

            $('.navigation').fadeIn(500).css('background-color', '#787878');

        } else {

            $('.navigation').fadeOut(500).not("ul li a");

        }

以下是导航 / p>

Here is the Navigation

`nav class="navigation" id="nav">
      <ul>
        <li><a href="#top" id="tp_link" class="active">Top</a></li>
        <li><a href="#item2" id="f_link">Item 2</a></li>
        <li><a href="#item3" id="s_link">Item 3</a></li>
        <li><a href="#item4" id="c_link">Item 4</a></li>
        <li><a href="#bottom" id="sm_link">Botton</a></li>
      </ul>
    </nav>`

我尝试使用 not（）函数只省略链接，以便当用户回滚时，唯一剩下的就是链接本身与背景图像一起使用。唯一应该消失的是背后的背景颜色。

I have tried using the not() function to omit only the links so that when the user scrolls back up, the only thing that remains is the links itself that go with a background image. The only thing that should disappear is the background color behind it.

使用jQuery的任何建议都有帮助。我很新，它

Any suggestions with jQuery would help. I am pretty new with it

推荐答案

我大概为你写了一个代码。以下是使用jquery更改背景颜色的示例。

I roughly write a code for you. Here is the example how you can change only background color using jquery.

Jquery

<script type="text/javascript">
    $(document).ready(function myfunction() {
        $("#nav").css("-webkit-transition", "all 0.6s ease")
        .css("backgroundColor", "grey")
        .css("-moz-transition", "all 0.6s ease")
        .css("-o-transition", "all 0.6s ease")
        .css("-ms-transition", "all 0.6s ease");
    });
</script>

HTML

<nav class="navigation" id="nav">
    <ul>
        <li><a href="#top" id="tp_link" class="active">Top</a></li>
        <li><a href="#item2" id="f_link">Item 2</a></li>
        <li><a href="#item3" id="s_link">Item 3</a></li>
        <li><a href="#item4" id="c_link">Item 4</a></li>
        <li><a href="#bottom" id="sm_link">Botton</a></li>
    </ul>
</nav>

这篇关于试图淡化导航背景只是不链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！