用滑塊動畫顯示和隱藏導航元素的最佳方式是什麼？

好的我有一個固定的導航欄，我有三個圖標。當一個圖標被點擊時，一個div（隱藏一個負邊距）將會滑出。當再次點擊該按鈕時，顯示的div將被隱藏（通過幻燈片動畫）。其他兩個圖標將重複此操作。用滑塊動畫顯示和隱藏導航元素的最佳方式是什麼？

我意識到有很多不同的方法來執行此操作，並且有很多支持文檔，其中有不同的意見。我試圖通過.click聲明.animate（{「left」：「+ = 56px」}，「slow」）&我也寫過函數來觸發onclick。我所意識到的是，我可以輕而易舉地完成這個簡單的任務，遠比它所需要的複雜。

任何建議的最乾淨的方式來執行此？

編輯：謝謝大家的意見。切換，雖然它本質上是極簡主義不會從左到右。我最終使用的腳本是：

<?// Toolbar ?> 
    <div id="toolbar"> 

     <img src="images/balihooGreyLogo.png" class="logo"/> 

     <a href="#" class="textIcon" title="Edit Copy"><img src="images/textIcon.png" border="0"/></a> 

     <a href="#" class="locationIcon"><img src="images/locationIcon.png" border="0"/></a> 

     <a href="#" class="mediaIcon"><img src="images/mediaIcon.png" border="0"/></a> 

     <a href="#" class="save">SAVE</a> 

     <a href="#" class="export">EXPORT</a> 

    </div> 




    <?// Text Input Slideout Box?> 
    <div class="textInput"> 
     <h1>Email Copy</h1> 

    </div> 
<script> 
$('.textIcon').click(function() { 
    $('.textInput').slideToggleWidth(); 
}); 

jQuery.fn.extend({ 
    slideRight: function() { 
    return this.each(function() { 
     $(this).animate({width: 'show'}); 
    }); 
    }, 
    slideLeft: function() { 
    return this.each(function() { 
     $(this).animate({width: 'hide'}); 
    }); 
    }, 
    slideToggleWidth: function() { 
    return this.each(function() { 
     var el = $(this); 
     if (el.css('display') == 'none') { 
     el.slideRight(); 
     } else { 
     el.slideLeft(); 
     } 
    }); 
    } 
}); 
</script>

來源

2012-03-26 Swordfish0321

查看'.toggle（）'''幻燈片效果。 http://jqueryui.com/demos/toggle/ – MetalFrog 2012-03-26 19:15:55

或者嘗試http://api.jquery.com/slideToggle/，它不包含jQuery UI的開銷。 – j08691 2012-03-26 19:20:42

你可能想提供一些代碼:) – 2012-03-26 19:46:06

這似乎是最簡單的方法。我假設你將它們隱藏在負面文字中以便於訪問（與display：none;）。如果你還沒有這樣做，我唯一能夠提出的建議就是編寫一個適用於所有按鈕的函數。

$('.icon').click(function() { 
     $(this).next('.nav-item').animate({"left":"+=56px"},"slow"); 
)};

你可能想看看另一件事是隱藏你想讀的項目通過屏幕閱讀器使用此代碼一些進展：http://snook.ca/archives/html_and_css/hiding-content-for-accessibility（再次假設這是爲什麼ü與負的ident隱藏它）：

.element-invisible { 
    position: absolute !important; 
    height: 1px; width: 1px; 
    overflow: hidden; 
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px); 
}

大概回答這個問題，但我想我會提到它。

來源

2012-03-26 19:49:16

用滑塊動畫顯示和隱藏導航元素的最佳方式是什麼？

回答

相關問題