爲什麼我的切換不能正常轉換

Question

在這裏一切都「正常」，但我的動畫顯示不正常。我想讓切換按鈕在導航消失時向上移動，但「慢」不起作用。

JQuery的：

//Close and open 
$(document).ready(function(){ 
$(".open, .close").click(function(){ 
    $(".navigation").slideToggle("slow"); 
    $(".open").toggle(); 
    $(".close").toggle(); 
    $(".navigation").css("display","inline"); 
    $(".collapse").toggleClass("collapse-closed","slow"); 
    }); 
}); 

CSS

.open{ 
    display:block; 
    margin: 12px auto 0px; 
    padding:0px; 
    width: 0; 
    height: 0; 
    border-left: 13px solid transparent; 
    border-right: 13px solid transparent; 
    border-top: 13px solid #9b9b9b; 
    transition: all 0.3s; 
    -moz-transition: all 0.3s; /* Firefox 4 */ 
    -webkit-transition: all 0.3s; /* Safari and Chrome */ 
    -o-transition: all 0.3s; /* Opera */ 
    cursor: pointer; 
} 
.open:hover{ 
    border-top: 13px solid #A70400; 
    } 
.close{ 
    display:none; 
    margin: 10px auto 0px; 
    padding:0px; 
    width: 0; 
    height: 0; 
    border-left: 13px solid transparent; 
    border-right: 13px solid transparent; 
    border-bottom: 13px solid #9b9b9b; 
    transition: all 0.3s; 
    -moz-transition: all 0.3s; /* Firefox 4 */ 
    -webkit-transition: all 0.3s; /* Safari and Chrome */ 
    -o-transition: all 0.3s; /* Opera */ 
    cursor: pointer; 
} 
.close:hover{ 
    border-bottom: 13px solid #A70400; 
} 
.collapse { 
    background-color: #f6f6f6; 
    border-radius: 4px; 
    border: 1px solid #919191; 
    -moz-box-shadow: 0 2px 4px #bdbdbd; 
    -webkit-box-shadow: 0 2px 4px #bdbdbd; 
    box-shadow: 0 2px 4px #bdbdbd; 
    z-index:8; 
    width: 46px; 
    height: 36px; 
    margin-bottom: -40px; 
    right: 20px; 
    position: fixed; 
    top: 24px; 
} 
.collapse-closed { 
    top: -8px; 
} 

.navigation { 
    border-bottom: 1px solid #919191; 
    -moz-box-shadow: 0 2px 4px #bdbdbd; 
    -webkit-box-shadow: 0 2px 4px #bdbdbd; 
    box-shadow: 0 2px 4px #bdbdbd; 
    position: fixed; 
    z-index: 7; 
    background-color: #f6f6f6; 
    width: 100%; 
    margin: 0 auto; 
    line-height: 0em; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

.navigation ul { 
    text-align: center; 
    line-height: 0; 
    margin: 10px 0; 
} 

.navigation ul li { 
    display: inline; 
    border-top-style: none; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    transition: all 0.5s; 
    -moz-transition: all 0.5s; /* Firefox 4 */ 
    -webkit-transition: all 0.5s; /* Safari and Chrome */ 
    -o-transition: all 0.5s; /* Opera */ 
    border-bottom: 4px solid rgba(167, 4, 0, 0); 
    margin-right: 8px; 
    margin-left: 8px; 
} 

.navigation ul li:hover, 
.navigation ul li:active { 
    display: inline; 
    border-bottom: 4px solid #A70400; 
} 

.navigation li a { 
    text-decoration: none; 
} 

HTML

<div class="navigation"> 
     <ul> 
      <li><a href="#ems">About Me</a></li> 
      <li><a href="#ems">Writing Samples</a></li> 
      <li><a href="#ems">Musings</a></li> 
      <li><a href="#ems">Books</a></li> 
     </ul> 

    </div> 
    <div class="collapse"> 
     <div class="open"></div> 
     <div class="close"></div> 
    </div> 

上午我莫名其妙地堵過渡速度？

謝謝！

Answer 1

將jQuery UI添加到您的頁面，它將允許您爲類更改添加動畫效果（使用jQuery 1.8的UI 1.8.22）。您的代碼可以在UI擴展中正常工作。

Fiddle

沒有你不能動畫類的變化UI。你可以用animate()替換這些類的變化傳遞top屬性，像這樣：

$(".collapse").animate({top: ($('.collapse').css('top') === '-8px') ? 24 : -8}, 'slow'); 

Fiddle