2013-02-19 8 views
0

저는 꽤 jquery에 익숙하며 jquery의 정적 비트에 '클립'슬라이드 열기 효과를 추가하려고했습니다. jquery의 정적 비트에 클립 토글 (clip toggle) 효과를 추가하는 방법

가 난 후 효과 ...

http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_142

인이 내 코드입니다 :

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <style type="text/css"> 
    div { margin: 0px; width: 100%; height: 80px; background: green; position: relative; } 
</style> 

    <script> 
var divs = $('section div'), 
    links = $('a'); 

links.click(function(){ 
    $(this.hash).toggle().siblings().hide(); 
}); 

    </script> 

    <style> 

    section div { 
    display: none; 
    width:100%; 
    height: 200px; 
    background-color: lime; 
} 

nav a { 
    padding: 10px; 
    background-color: red; 
    color: white; 
    display: inline-block; 
} 
</style> 

</head> 
<body style="margin:0px;"> 

<section> 
    <div id="1"> 
     <a href="#1" style="float:right;">X</a> 
     <a href="#2">next &raquo;</a> 
    </div> 

    <div id="2"> 
     <a href="#2" style="float:right;">X</a> 
     <a href="#1">&laquo; prev</a> 
     <a href="#3">next &raquo;</a> 
    </div> 

    <div id="3"> 
     <a href="#3" style="float:right;">X</a> 
     <a href="#2">&laquo; prev</a> 
     <a href="#4">next &raquo;</a> 
    </div> 

    <div id="4"> 
     <a href="#4" style="float:right;">X</a> 
     <a href="#3">&laquo; prev</a> 
     <a href="#1">next &raquo;</a> 
    </div> 
</section> 

<nav> 
<a href="#1">one</a> 
<a href="#2">two</a> 
<a href="#3">three</a> 
<a href="#4">four</a> 
</nav> 

</body> 
</html> 

당신이 여기 행동에서 볼 수 있습니다

http://jsfiddle.net/greggb/8gfEZ/1/

이 도움말 ould 위대해라, 나는 포럼의로드를 시험해 보았다. 그러나 단지 기울어 져라.

답변