jQuery使用修改name值做一個點擊左右滑動css3動畫區塊特效-教學撰寫:徐嘉裕Neil hsu

最近需要幫客戶做一個jQuery區塊特效，就是點了按鈕左區塊會往左滑出內容區，然後再點一次按鈕左區塊又會往右滑回內容區，

這裡比較特殊工法的是利用修改name值來判斷區塊開啟還是關閉，這樣也能使用.css()來控制區塊的移動特效，方法如下：


//html結構

<div id='leftboxdiv'>

<div id='switchbtn' name='go'></div>  //name值預設是go

內容內容內容內容內容內容內容內容內容內容內容

</div>

//js-code


//滑入滑出左區塊

$(document).ready(function(){
$("#switchbtn").click(function(){
if($(this).attr("name")=="go"){
$("#leftboxdiv").css({"animation-name":"leftboxdivgo","left":"-293px"});
$(this).attr('name','back');  //吧name值改成back
}else{
$("#leftboxdiv").css({"animation-name":"leftboxdivback","left":"0px"});
$(this).attr('name','go');   //吧name值改成go
}
});
});


//css


#leftboxdiv{
position: absolute;
width: 293px;
height: 1076px;
background: url(../../img/blocks/travelerliving-commodity_01.png) repeat left top;
z-index: 100;
animation-duration: 1.5s;
top: 0px;
}

@keyframes leftboxdivgo {
from {
left: 0px;
}
to {
left: -293px;
}
}


@keyframes leftboxdivback {
from {
left: -293px;
}
to {
left: 0px;
}
}


#switchbtn{
position: absolute;
width: 30px;
height: 58px;
background: url(../../img/unit/travelerliving-commodity_17.png) repeat left top;
z-index: 100;
right: -30px;
top: 457px;
cursor: pointer;
}

這樣就完成了阿，因為是透過css3動畫特效來做移動的，所以視覺上可以調整很多變化，像是由快到慢，或是由慢到快等，視覺美觀也比較好看!!


教學撰寫：徐嘉裕 Neil hsu