我设置了这个 fiddle :https://jsfiddle.net/xwb9594m/
如您所见,当关闭滑动菜单时,内容会随着菜单缩小而换行。我正在尝试让它干净地滑离屏幕的一侧。
这是我的 JS:
$(document).ready(function() {
var menuBtn = $('.video-search-button'),
menu = $('.video-search-menu'),
close = $('.video-search-menu .close');
menuBtn.click(function(){
menu.animate({width: 'toggle'});
});
close.click(function(){
menu.animate({width: 'toggle'});
});
});
和我的 SCSS:
.video-search-menu {
display: none;
position: fixed;
top: 0;
right: 0;
width: auto;
height: 100%;
overflow: hidden;
background: #24637e;
background: rgba(36, 99, 126, 0.9);
color: #fff;
z-index: 101;
&-wrapper {
position: relative;
padding: 180px 50px 0 50px;
}
.close {
position: absolute;
width: 40px;
height: 40px;
top: 15px;
left: 15px;
z-index: 9999;
cursor: pointer;
&:before, &:after {
content: '';
position: absolute;
width: 100%;
top: 50%;
height: 2px;
background: #ffffff;
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
最佳答案
添加 CSS 规则
p{
overflow: hidden;
white-space: nowrap;
}
关于javascript - 使用 jquery animate 时停止换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35895481/