從右向左滑動切換DIV

Question

我試圖將DIV從右向左滑動到另一個DIV上。它適用於最初的幻燈片播放，但它是無法正常工作的幻燈片。它再次從右向左滑動消失，然後我嘗試再次單擊該按鈕，但在第一次打開和關閉後它將不起作用。

我的代碼遵循：

function changeFeat() { 
    if(jQuery('#featartinside').css('display') == 'none') { 
     jQuery('#featartinside').animate({ 
      width: 730, 
      marginLeft: 1, 
      marginRight: -730, 
      display: 'toggle' 
     }, 'slow'); 
    } else { 
     jQuery('#featartinside').animate({ 
      width: -730, 
      marginLeft: 1, 
      marginRight: 730, 
      display: 'toggle' 
     }, 'slow'); 
    } 
} 

#featartban { 
    position: relative; 
    background: url(../images/featart.png) top left no-repeat; 
    width: 54px; 
    height: 279px; 
    cursor: pointer; 
    float: left; 
    left: 730px; 
    margin-bottom: -279px; 
} 

#featartinside { 
    height: 279px; 
    width: 0; 
    margin-left: 730px; 
    background: #D13630; 
    float: left; 
    margin-bottom: -279px; 
} 

就像我說的，它工作正常打開，這是不工作，因爲它繼續從右到左，而不是收盤左至右閉幕。然後我無法再打開和關閉。

編輯HTML：

<div id="featartban" onclick="changeFeat(); return false;"></div> 
<div id="featartinside" style="display: none;"></div> 

Answer 1

堅持jQuery的。

<div id="featartban"></div> 
<div id="featartinside" style="display: none;"></div>​ 

var $featartban = $("#featartban"); 
var $featartinside = $("#featartinside"); 
$featartban.toggle(function show() { 
    $featartinside.animate({ 
    width: 730, 
    marginLeft: 1, 
    marginRight: -730, 
    display: 'toggle' 
    }, 'slow'); 
}, function hide() { 
    $featartinside.animate({ 
    width: 0, 
    marginLeft: 730, 
    marginRight: 0, 
    display: 'toggle' 
    }, 'slow'); 
});​ 

.toggle()（不.toggle()混淆）是真棒。

See it live here.

Answer 2

你可以試試這個

JS：

/*creating click event*/ 
$(document).ready(function(){ 
    $('a#click-a').click(function(){ 
    $('.nav').toggleClass('nav-view'); 
    }); 
}); 

演示：http://www.themeswild.com/read/slide-navigation-left-to-right