jquery淡入淡出_固定的淡出菜单：CSS和jQuery教程

jquery淡入淡出

View demo 查看演示 Download Source 下载源

Inspired by David Walsh’s top navigation bar that gets semi-transparent when you scroll down the page, I decided to create a tutorial out of that idea.

受到David Walsh顶部导航栏的启发，当您向下滚动页面时，该导航栏变为半透明，我决定根据该想法创建一个教程。

The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.

目的是要有一个固定的导航，使用户在滚动时跟随它，并且仅通过淡出并变得几乎透明来巧妙地显示自己。 当用户将鼠标悬停在菜单上时，菜单将再次变得不透明。

Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

在导航内部，我们将具有一些链接，搜索输入以及顶部和底部按钮，这些链接使用户可以导航到页面的顶部或底部。

Ok, let’s start.

好的，让我们开始吧。

1. HTML (1. The HTML)

The markup is pretty simple: we have a div with a list inside. The list items will be our links, the search input and the arrow buttons:

标记非常简单：我们有一个div，里面有一个列表。 列表项将是我们的链接，搜索输入和箭头按钮：

<div id="nav">
 <ul>
  <li><a class="top" href="#top"><span></span></a></li>
  <li><a class="bottom" href="#bottom"><span></span></a></li>
  <li><a>Link 1</a></li>
  <li><a>Link 2</a></li>
  <li><a>Link 3</a></li>
  <li><a>Link 4</a></li>
  <li><a>Link 5</a></li>
  <li><a>Link 6</a></li>
  <li class="search">
   <input type="text"/>
   <input class="searchbutton" type="submit" value=""/>
  </li>
 </ul>
</div>

The links with the classes top and bottom are the arrows that will lead the user to the beginning or the end of the page. The hrefs in these links reference to some elements having the id top and bottom. Make sure, you reference the right elements in your page. The bottom could, for example, be your comments section in you WordPress blog. In that case you would need to refer to #comments instead.

带有顶部和底部类的链接是将引导用户到页面开头或结尾的箭头。 这些链接中的href引用了ID为top和bottom的某些元素。 确保在页面中引用正确的元素。 例如，底部可能是WordPress博客中的评论部分。 在这种情况下，您将需要引用#comments。

The span of the top and bottom links will contain the actual arrows as background images. The search button which is a submit button will have no value since we want to give it a background image and no text.

顶部和底部链接的范围将包含实际箭头作为背景图像。 搜索按钮(即提交按钮)将没有任何价值，因为我们要为其提供背景图片且没有文本。

Let’s look at the style now.

让我们现在看看样式。

2. CSS (2. The CSS)

Let’s first define the main navigation div:

首先定义主导航div：

#nav{
    height:35px;
    border-bottom:1px solid #ddd;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:#fff url(../images/nav.png) repeat-x center left;
    z-index:999999;
}

The navigation will always stay right at the top of the page because we “glue” it there with position:fixed and top:0px. The background image will be a semi-transparent button-like background with a slight 3D effect. Since it is almost transparent, you can try to use different background colors instead of white (#ffffff).

导航将始终停留在页面顶部，因为我们使用position：fixed和top：0px将其“粘合”在那里。 背景图像将是具有半透明3D效果的半透明按钮状背景。 由于它几乎是透明的，因此您可以尝试使用其他背景颜色代替白色(#ffffff)。

We set the z-index very high since we don’t want any other absolute element to be on top of our navigation.

我们将z-index设置得很高，因为我们不希望任何其他绝对元素位于导航的顶部。

The unordered list and its list items will have the following style:

无序列表及其列表项将具有以下样式：

#nav ul{
    height:25px;
    list-style:none;
    margin:6px auto 0px auto;
    width:600px;
}
#nav ul li{
    display:inline;
    float:left;
    margin:0px 2px;
}

The unordered list has a fixed width of 600px and will be positioned in the center of the navigation. Centering a relatively positioned element can be achieved by stating that the left and right margin is auto.

无序列表的固定宽度为600px，将位于导航中心。 可以通过声明左右边距为auto来使相对定位的元素居中。

The list elements shall be aligned next to each other. We define that with display:inline. We make them floating left because we want to apply a margin here, creating some space between the items.

列表元素应彼此对齐。 我们用display：inline定义它。 我们使它们向左浮动，因为我们想在此处应用边距，从而在项目之间创建一些空间。

The general style of all the link elements will be the following:

所有链接元素的一般样式如下：

#nav a{
    font-size:11px;
    font-weight:bold;
    float:left;
    padding: 2px 4px;
    color:#999;
    text-decoration: none;
    border:1px solid #ccc;
    cursor: pointer;
    background:transparent url(../images/overlay.png) repeat-x center left;
    height:16px;
    line-height:16px;
}
#nav a:hover{
    background:#D9D9DA none;
    color: #fff;
}

Although it is not really necessary to state that the cursor should be of type pointer here since it is a link element, I often define that because in some browsers the pointer will only appear when there is an “href”. That might not always be the case and so it is always better to define it again in the CSS if one is not sure how link elements will be used.

尽管实际上并没有必要指出游标应该是指针类型，因为它是一个链接元素，但我经常定义它，因为在某些浏览器中，指针只会在存在“ href”时出现。 情况并非总是如此，因此如果不确定如何使用链接元素，最好在CSS中再次定义它。

The links will have a semi-transparent background image similar to the one for the navigation. Again, you can simply define a color for the background or experiment with combinations of these. The overlay image tints any background color in a light gray.

链接将具有类似于导航的半透明背景图像。 同样，您可以简单地为背景定义颜色，也可以结合使用这些颜色进行实验。 重叠图像会将任何背景色都变为浅灰色。

When hovering over the link element, we remove the background image and change the background color.

将鼠标悬停在link元素上时，我们会删除背景图像并更改背景颜色。

Let’s look at the style of the two arrow links:

让我们看一下两个箭头链接的样式：

#nav a.top span, #nav a.bottom span{
    float:left;
    width:16px;
    height:16px;
}
#nav a.top span{
    background:transparent url(../images/top.png) no-repeat center center;
}
#nav a.bottom span{
    background:transparent url(../images/bottom.png) no-repeat center center;
}

Now we define the style for the list element that contains the search and the text input:

现在，我们为包含搜索和文本输入的list元素定义样式：

#nav ul li.search{
    float:right;
}
#nav input[type="text"]{
    float:left;
    border:1px solid #ccc;
    margin:0px 1px 0px 50px;
    padding:2px 2px 2px 2px;
}

Generally, with specifying input[type=”text”] you make sure that you will not change the style of all other inputs. That is a good way of specifying the design of a certain type of inputs. The margin (TOP RIGHT BOTTOM LEFT) to the left will be a bit more because we want to separate the other links from the search.

通常，通过指定input [type =” text”] ，可以确保不会更改所有其他输入的样式。 这是指定某种输入类型设计的好方法。 左边距(TOP RIGHT BOTTOM LEFT)会多一些，因为我们想将其他链接与搜索分开。

The submit button will have the following style:

提交按钮将具有以下样式：

input.searchbutton{
    border:1px solid #ccc;
    padding:1px;
    cursor:pointer;
    width:30px;
    height:22px;
    background:#E8E9EA url(../images/search.png) no-repeat center center;
}
input.searchbutton:hover{
    background-color:#D9D9DA;
}

This is a good example of when to use a class instead of specifying the style for e.g. input[type=”submit”]. There might be many submits in your page, but this one is very special and no other submit will look like it except the search submit. This input will not have any value as you saw in the HTML part. Instead, we will have an icon as background image.

这是一个何时使用类而不是为input [type =” submit”]指定样式的好例子。 您的页面中可能有很多提交，但是这一提交非常特殊，除搜索提交外，其他任何提交都不会像它。 正如您在HTML部分看到的那样，此输入将没有任何值。 相反，我们将有一个图标作为背景图像。

And that’s all the style! Now let’s add some rocking JavaScript:

这就是所有样式！ 现在，让我们添加一些摇摆JavaScript：

3. JavaScript (3. The JavaScript)

What we want to do now, is to leave the menu as it is, whenever we are at the top of the page. When we start scrolling, we want the menu to fade out and to be almost transparent. When we hover over it, it should appear opaque again. All this we define in the following lines of JavaScript:

我们现在想做的就是，只要我们位于页面顶部，就保持菜单不变。 当我们开始滚动时，我们希望菜单淡出并且几乎是透明的。 当我们将鼠标悬停在它上面时，它应该再次显示为不透明。 我们在以下JavaScript行中定义了所有这些：

$(function() {
	$(window).scroll(function(){
		var scrollTop = $(window).scrollTop();
		if(scrollTop != 0)
			$('#nav').stop().animate({'opacity':'0.2'},400);
		else	
			$('#nav').stop().animate({'opacity':'1'},400);
	});
	
	$('#nav').hover(
		function (e) {
			var scrollTop = $(window).scrollTop();
			if(scrollTop != 0){
				$('#nav').stop().animate({'opacity':'1'},400);
			}
		},
		function (e) {
			var scrollTop = $(window).scrollTop();
			if(scrollTop != 0){
				$('#nav').stop().animate({'opacity':'0.2'},400);
			}
		}
	);
});

So, if we are not at the top of the page, scrolling the window will change the opacity value. That effect takes 400 milliseconds (adapt to your preferred time). If we are at the top of the page, the opacity will have the value 1 which means that the element will be opaque.

因此，如果我们不在页面顶部，则滚动窗口将更改不透明度值。 该效果需要400毫秒(适应您的首选时间)。 如果我们位于页面顶部，则不透明度的值将为1，这表示元素将是不透明的。

When hovering over the element, we make it opaque and when we move the mouse out, we will make it more transparent again (if we are not at the top).

将鼠标悬停在元素上时，我们使其不透明，并且将鼠标移出时，将再次使其更加透明(如果我们不在顶部)。

And that’s all! Enjoy!

就这样！ 请享用！

testking CISSP course foe designers and web developers download CISSP课程，旨在帮助设计师和Web开发人员下载 testking 350-030 guide and testking 350-030指南和 testking 642-436 tutorials to learn css and jquery for your web project. Testking 642-436教程，以学习Web项目CSS和jQuery。

翻译自: https://tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/

jquery淡入淡出