JQuery特效之三-----手风琴效果

前端三大组成

html构建内容，css美化，js控制交互，jquery是一个常用js库。

html：

    
    
    
    
    


    

        

            

                
                    

                        
作者：eric
                        
我的个人拉萨之旅 | 故事之城
                    
                
            
            

                
                    

                        
作者：eric
                        
我的个人丽江之旅 | 艳遇之城
                    
                
            
            

                
                    

                        
作者：eric
                        
我的个人成都之旅 | 美食之城
                    
                
            
        
        
    
    
    
    
    

css：

*{
padding: 0px;
    margin: 0px;
    font-family: cursive;
    list-style-type: none;
}
a
{
    text-decoration: none;
}

.pic
{
    width: 1100px;
    height: 600px;
    margin-top: 70px;
}
.pic ul li{
    float: left;
    width: 100px;
    height: 429px;
}

.pic1
{
    background-image: url("../imgs/01.jpg");
}
.pic2
{
    background-image: url("../imgs/02.jpg");
}
.pic ul .pic3
{
    background-image: url("../imgs/03.jpg");
    width: 789px;
}


.txt
{
background-color: aliceblue;
background: rgba(0,0,0,0.5);
height: 429px;
width: 100px;
}
.txt p{
float: left;
    color: white;
    
}
.txt .p1{
font-size: 12px;
    width: 12px;
    padding: 25px 25px 0px 20px;
}
.txt .p2{
font-size: 14px;
    width: 14px;
    padding: 25px 25px 0px 20px;
}

js：

$(function(){

    
    $(".pic ul li").mouseover(function(){
    
            $(this).stop(true).animate({width:"789px"},1000).siblings().stop(true).animate({width:"100px"},1000);
    
    });
    
});

以上即可。