gpt4 book ai didi

javascript - 使用 jQuery 从 'behind' 按钮滑动 div(从左到右)

转载 作者:行者123 更新时间:2023-11-28 06:28:25 25 4
gpt4 key购买 nike

使用本指南的最后一个示例 ( http://www.learningjquery.com/2009/02/slide-elements-in-different-directions ),我试图让 div 在按钮“后面”切换。

期望的结果示例: enter image description here最初,包含输入字段、按钮 B 和按钮 C 的 div 将被隐藏。单击“滑动”按钮时,div 从按钮后面滑入,直到 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/

最佳答案

fiddle :https://jsfiddle.net/xqb5a7dq/6/

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

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

function animateDiv () {
$('.inner').toggleClass('visible');
$('.inner').animate({
width: 'toggle',
},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;
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>

关于javascript - 使用 jQuery 从 'behind' 按钮滑动 div(从左到右),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34907210/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com