Stunning jquery-like flash navigation bar effects_jquery

FLASH navigation is basically outdated now, but we can use jQuery to achieve flash effects, which is very good.

Demo address: http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html

Copy code The code is as follows:

                                                                                                                                                                                                                                                                                                                                                  & Lt; span & gt; test & lt;/span & gt;
                                                                                                                                                                                                                                                                                                                                 & Lt; span & gt; test & lt;/span & gt;
                                                                                                                                                                                                                                                                                                                                 & Lt; span & gt; test & lt;/span & gt;
                                                                                                                                                                                                                                                                                                                                    & Lt; span & gt; test & lt;/span & gt;
                                                                                                                                                                                                                                                                                                                              & Lt; span & gt; test & lt;/span & gt;
                                                                                                                                                                                                                                                                                                                              & Lt; span & gt; test & lt;/span & gt;
                                                                                                                                                                                   








Copy code


The code is as follows:

$(document).ready(function(){
$(".menu").mouseover(function(){
      var div = $(this).children(".menu_b");  
        var span = $(this).children("span");  
//Hide font, move 20px to the right
        span.stop(true,false).animate({opacity:'0',left:'20px'},200);
//Show background animation
        div.stop(true,false).animate({width:'100px',marginLeft:'-50px',height:'1px',opacity:'1'},300);
      div.animate({height:'40px',marginTop:'-20px',opacity:'1'},300);
//Display font, move 20px to the left
        span.animate({opacity:'1',left:'0px'},300);
        span.css({color:'#FFF'});
});

$(".menu").mouseout(function(){
      var div = $(this).children(".menu_b");  
        var span = $(this).children("span");  
//Hide font, move 20px to the left
        span.stop(true,false).animate({opacity:'0',left:'20px'},200);
//Show background animation
        div.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300);
      div.animate({width:'0px',marginLeft:'0px',opacity:'1'},300);
//Display font, move 20px to the right
        span.animate({opacity:'1',left:'0px'},300);
        span.css({color:'#777'});
});
});

I wrote the animation effects according to my own preferences. You can change the special effects yourself if you like. .

Copy code The code is as follows:

/* demo01 css */
#main{
background: #EEE;
Display: inline-block;
padding: 10px;
}
.menu{position: relative;
width: 100px;
Height: 40px;
margin: 10px auto;
}

.menu_b{
position: absolute;
Width: 0px;
height: 0px;
background: red;
z-index: 1px;
top: 50%;
left: 50%;
}
.menu span{
position: inherit;
Display: block;
Text-align: center;
Line-height: 40px;
z-index: 3px;
font-size: 14px;
font-family: "Microsoft Yahei";
Color: #777;
Cursor: pointer;
}
.back1{
background: #FF0000;
}
.back2{
background: #921AFF;
}
.back3{
background: #00CACA;
}
.back4{
background: #00DB00;
}
.back5{
background: #FF5809;
}
.back6{
background: #E1E100;
}

The code is very simple, and it is also very simple to use, including modifications. You can figure it out by yourself