从右向左滑动切换DIV

问题描述：

我试图将DIV从右向左滑动到另一个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>

你能粘贴HTML？ – TNCodeMonkey

这是2行哈哈:)完成。 – jfreak53

我看到的问题是，一旦你折叠内部div，它保持“块”的显示类型。因此，不要打开开放代码。 – TNCodeMonkey

答

坚持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.

真棒！我知道我错过了一些东西。谢谢。 – jfreak53

答

你可以试试这个

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

相关推荐