滑动从右到左切换 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;
}

就像我说的，它适用于打开，关闭不起作用，因为它从右到

左继续而不是从左到右关闭。然后我无法获得第二次打开和关闭。

编辑网页：

<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()混淆）很棒。

在这里现场观看。

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