이 기사는 아래에서 탭 전환 효과, 호버 및 수평선 애니메이션 변위를 달성하기 위한 jquery를 주로 소개합니다. 관심 있는 친구들이 모두 참고할 수 있기를 바랍니다.
호버링과 아래쪽 수평선 애니메이션 변위를 동시에 달성:
코드:
<sytle> *{margin:0;padding:0; } .box{position:relative;font-size:0;} .box span{display:inline-block;width:150px;height:40px;line-height:40px;text-align:center;background:#eee;font-size:16px;} .line{position:absolute;width:150px;height:3px;background:#059;left:0;bottom:0;} </style> <p class="box" id="switch"> <span class="current">新闻资讯</span> <span>公司动态</span> <p class="line"></p> </p> $(function(){ var $spans=$("#switch span"); $spans.click(function(){ $(this).addClass('current').siblings().removeClass('current'); var index=$spans.index(this); //$("#content .detail").eq(index).show().siblings().hide(); //$("#fr .bar").eq(index).show().siblings().hide(); }) $spans.mouseover(function(){ var index=$spans.index(this); var cName=$(this).attr("class"); if(cName!="current"){ if(index==0){ $('.line').animate({'left':'0px'},300); }else{ $('.line').animate({'left':'150px'},300); } } }) $spans.mouseout(function(){ var index=$spans.index(this); var cName=$(this).attr("class"); if(cName!="current"){ if(index==0){ $('.line').animate({'left':'150px'},300); }else{ $('.line').animate({'left':'0px'},300); } } }) })
관련 권장 사항:
위 내용은 jquery는 탭 전환 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!