Question

所以我试图仅使用jquery淡入导航背景，但是当这样做时，它也会以某种方式使导航链接淡出导航背景。

这是我的代码：

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

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

        } else {

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

        }

这是导航

`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()函数仅省略链接，以便当用户向上滚动时，唯一剩下的就是链接本身与背景图像一起使用。唯一应该消失的是背后的背景颜色。

使用jQuery的任何建议都会有所帮助。我是新手

Answer 1

使用过渡属性。基本上，您将过渡属性设置为导航类的背景颜色，并为其指定持续时间。

＆＃13;

$(window).scroll(function() {
	if ($(this).scrollTop() > 200) {

            $('.navigation').css('background-color', 'blue');

        } else {

            $('.navigation').css('background-color', 'red');

        }
        });

＆＃13;

	.navigation{
		height:1000px;	
		background-color: black;
		transition:background-color 2s;
	}

＆＃13;

<!DOCTYPE html>
<html>

<body>
<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>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

＆＃13;

Answer 2

我大致为你编写代码。以下是如何使用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>

试图淡化导航背景只是没有链接

2 个答案: