jquery - 从右向左滑动切换 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.