使用jQuery从一个按钮的'后面'滑动div（从左到右）

使用本指南的最后一个示例（http://www.learningjquery.com/2009/02/slide-elements-in-different-directions），我试图让div切换按钮后面的按钮。使用jQuery从一个按钮的'后面'滑动div（从左到右）

预期结果示例：最初，包含输入字段，按钮B和按钮C的div将被隐藏。当单击“滑动它”按钮时，div会在按钮后面的FROM中滑动，直到div的右侧和“滑动它”按钮之间达到特定的距离（边距）。再次单击按钮（和/或按下'Esc'键时），div将滑动到“按钮”中。

这里是脚本，然后是演示：

$('#button1').click(function() { 
    var $marginRighty = $('.inner'); 
    $marginRighty.animate({ 
     marginRight: parseInt(
      $marginRighty.css('marginRight'),10) == 0 ? 
       $marginRighty.outerWidth() : 0}); 
});

https://jsfiddle.net/ishq786/xqb5a7dq/

来源

2016-01-20 Ali

小提琴：https://jsfiddle.net/xqb5a7dq/6/

$('#button1').on('click', function() { 
 
\t animateDiv(); 
 
}) 
 

 
$(document).keyup(function(e) { 
 
\t if (e.keyCode === 27 && $('.inner').hasClass('visible')) { 
 
\t \t animateDiv(); 
 
\t } 
 
}) 
 

 
function animateDiv() { 
 
\t $('.inner').toggleClass('visible'); 
 
\t $('.inner').animate({ 
 
\t \t width: 'toggle', 
 
\t },350); 
 
}

.toolbar { 
 
    width: 100%; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    margin: 0px auto; 
 
    padding: 5px 0px; 
 
    background-color: skyblue; 
 
} 
 

 
#divA, 
 
#divB { 
 
    display: inline; 
 
} 
 

 
.inner { 
 
    float: right; 
 
    display: none; 
 
\t padding-right: 20px; 
 
} 
 

 
#button1 { 
 
    float: right; 
 
    margin-right: 5px; 
 
} 
 

 
input, 
 
button { 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='toolbar'> 
 
    <div> 
 
     <button id="button1">Slide it</button> 
 
    </div> 
 
    <div class="inner is-hidden"> 
 
     <div id="divA"> 
 
      <input type="text" /> 
 
      <input type="password" /> 
 
     </div> 
 
     <div id="divB"> 
 
      <button>Button B</button> 
 
      <button>Button C</button> 
 
     </div> 
 
    </div> 
 
</div>

来源

2016-01-20 18:30:35

谢谢！这更符合我所寻找的内容。有没有办法让它看起来像div来自按钮？或者你认为这种方式看起来更加优雅吗？ – Ali

这是个人喜好。要使它从按钮滑动，请从按钮中删除边距，并将其作为填充添加到内部div：https://jsfiddle.net/xqb5a7dq/3/ –

@Ali - 请参阅https://jsfiddle.net/ xqb5a7dq/6 /用于ESC键功能。 –

Fiddle。

我解决了你的一些问题。我承认我并不确定你希望结果如何，所以我会把你的调整留给你。但有两个主要的东西;

我已经使用CSS来获得一个在另一个之上。我定位内部div 100％权利，position: relative，并且顶部的按钮现在有其右侧的父div设置为position: absolute，以便它可以重叠而没有足迹。我从字面上移动了HTML中较低的按钮，所以我不必与z-index混淆，哈哈。
我把你的Javascript移动到了一个单独的函数中，所以你可以通过按键或者你喜欢的方式调用它。这意味着你不会有代码重复。

来源

2016-01-20 18:16:16 Thomas

谢谢。几件事情：1）div对于不同的页面宽度工作不同，2）可以看到从右侧来到并在按钮后面滑动。我想让div被按钮“吃掉” - 不要越过按钮。 – Ali

使用jQuery从一个按钮的'后面'滑动div（从左到右）

回答

相关问题