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

从右向左滑动切换DIV

2 个答案: