Implementation of English-Chinese Switching Navigation Bar Effect Based on jQuery

I have adopted two methods to implement, one using css, another way is to use jQuery.First, let's talk about using css

How to implement:3html:

<!DOCTYPE html>3<html lang="en">

<head>

<meta charset="UTF-8">
">
<title>Home</title>
 title>-8<link rel="stylesheet" href="..
 css/demo
 .css">/head>/<body>2<div class="nav">
body:/<ul class="nav
list">
 <b>index</b>
 b:-<i>Home</i>
 <i>Store</i>
 <li>
 <b>bbs</b>/<b>download</b>
 b:/<i>Download</i>
 body:/i:
 body:/a:
 <i>Store</i>
 <li>
 <i>Forum</i>/<b>download</b>
 <b>blog</b>/<i>Download</i>
 body:/i:
 body:/a:
 <i>Store</i>
 <li>
 b:/<b>download</b>
 <i>Blog</i>/<i>Download</i>
 body:/i:
 body:/a:
 <i>Store</i>
 <li>
 <b>mall</b>/<b>download</b>
 b:/<i>Download</i>
 body:/i:
 body:/a:
 <i>Store</i>
 <li>
 <a href="index.html">/<b>download</b>
 b:/<i>Download</i>
 body:/i:
 body:/a:
 body:/li:
 body:/ul:
body:/div:
body:/<

html:

*{
 margin: 0px;
 padding: 0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif-serif, Lato;
}
li{
 list-style: none;
}
a{
 text-decoration: none;
}
.nav{
 width:100%;
 height: 40px;
 background-color: #222;
 margin-top:100px;
 overflow: hidden;
}
.nav-list{
 width:1000px;
 margin:0 auto;
 height: 40px;
}
.nav-list li {
 float: left;
}
.nav-list li a{
 display: block;
 css:2transition: 0s;
}
.nav-list li b,.nav-list li i{
 color:#aaa;
 line-height: 40px;
 display: block;
 padding:0 30px;
 text-align: center;
}
.nav-list li b{
 font-weight:normal;
}
.nav-list li i{
 font-style: normal;
 color:#fff;
 background-color: #333;
}
.nav-s;
 margin-top:-40px;
}

list li a:hover{

Next is the implementation using jQuery: the red part is the implementation process, which uses position changes to display Chinese when the mouse hovers over it, that is, to move the English away. It is worth noting that the overflow: hidden property needs to be used to hide it. If you want the speed to be slower, you can use the transition property to set the change time to slow down the speed.

css:

*{
 margin: 0px;
 padding: 0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif-serif, Lato;
}
li{
 list-style: none;
}
a{
 text-decoration: none;
}
.nav{
 width:100%;
 height: 40px;
 background-color: #222;
 margin-top:100px;
 overflow: hidden;
}
.nav-list{
 width:1000px;
 margin:0 auto;
 height: 40px;
}
.nav-list li {
 float: left;
}
.nav-list li a{
 display: block;
}
.nav-list li b,.nav-list li i{
 color:#aaa;
 line-height: 40px;
 display: block;
 padding:0 30px;
 text-align: center;
}
.nav-list li b{
 font-weight:normal;
}
.nav-list li i{
 font-style: normal;
 color:#fff;
 background-color: #333;
}

jquery:

$(function(){
 $(".nav-list li a").hover(function(){
 $(this).stop().animate({"margin-top":-40},200)
 },function(){
 $(this).stop().animate({"margin-top":0},200)
 });
});

The key to implementing the function is the implementation of the animate() function, by setting the margin-The implementation of the top and time functions, in order to prevent rapid passage, all changes (as shown in the figure below), you need to add the stop() function before the animate() function, that is, stop other animations before starting this animation.

That's all for this article, I hope it helps with your learning, and I also hope everyone will support the Yell Tutorial.

Basic Tutorial

Elasticsearch Tutorial