jQuery - 滑动垂直对齐列

在左侧列中，我有一个“触发器”来隐藏右侧列，这会使左侧列在隐藏右侧列时展开100％。现在我可以让右列出现，但问题在于右列包含在左列下（当然，左列有100％的宽度），而不是像它最初开始时那样位于旁边。

我不是一个jQuery/JavaScript程序员，但我会认为我在用我的jQuery代码处于一个很好的方向。

这里是我的HTML：

<div id="wrapper"> 
    <div id="left-col"> 
    <div id="trigger"><a href="#">Toggle</a></div> 
    <p>...</p> 
    </div> 
    <div id="right-col">Right Column</div> 
    <br class="clear"> 
</div>

这是jQuery的我到目前为止：

$(function() { 
    $("#left-col").addClass("wide80"); 
    $("#trigger a").click(function(){ 
    $("#right-col").animate({width:'toggle'},350); 
    $("#left-col").animate({width:'100%'},350); return false 
    }); 
});

任何帮助，您可以给我将不胜感激。

谢谢。

来源

2010-05-20 Ricardo Zea

你可以试试这个 - 这些方针的东西应该工作

$(function() { 
    $("#left-col").addClass("wide80"); 
    $("#trigger a").click(function(){ 
     var leftCol = $("#left-col"); 

     if(leftCol.data('expanded')) { 
      leftCol.animate({width:'50%'},350); 
      leftCol.data('expanded', false); 
     } else { 
      leftCol.animate({width:'100%'},350); 
      leftCol.data('expanded', true); 
     } 

     $("#right-col").animate({width:'toggle'},350); 

     return false; 
    }); 
});

来源

2010-05-20 23:13:18

有趣。我打算建议将第二个动画放入第一个回调函数中，但这看起来好多了。 – karim79 2010-05-20 23:16:02

完美！：D 我对它做了小的修改，因为在点击切换按钮之后，右列出现在左侧列下半秒。由于语义原因，我也对CSS类进行了一些更改，这就是为什么有些名称有些不同。我很难理解if/else，var，我不知道'.data'......哦。查看下面帖子中的最终工作代码。非常感谢克里！ – 2010-05-21 15:41:36

不是问题！很高兴我能帮上忙：） – 2010-05-21 19:07:12

最后的工作代码，感谢克里：

$(function() { 
    $("#left-col").addClass("wide"); 
    $("#trigger a").click(function(){ 
    var leftCol = $("#left-col"); 

    if(leftCol.data('expanded')) { 
     leftCol.animate({width:'60%'},350); 
     leftCol.data('expanded', false); 
     $("#right-col").toggle(350); 
    } else { 
     leftCol.animate({width:'100%'},350); 
     leftCol.data('expanded', true); 
     $("#right-col").hide(); 
    } 
    return false; 
    }); 
});

来源

2010-05-21 15:44:07

jQuery - 滑动垂直对齐列

回答

相关问题