gpt4 book ai didi

javascript - 在保持 div 大小的情况下从左向右或右向左滑动 div

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

我想要一个div从左到右或从右到左的滑动效果

$('#div').show('slide', {direction:'left'}, 1000);

作为我的 html 是

<div id="div-pre">
</div>
<div id="div">
</div>
<div id="div-nex">
</div

但这种方法的问题是我们最初通过设置隐藏#div

#div{
display:none;
}

这样我们就不能保留#div的宽度

我遇到了另一种方法,使 visibility: hidden as in

$("div").css("visibility", "hidden");

保持div的宽度但是这种方法并没有给出从左到右或从右到左的滑动效果

So I want to achieve both "the effect as in .show('slide', [option], [speed]) altogether with preserving the div width"

最佳答案

由于没有示例代码可以运行,我决定编写一个基本示例来说明如何处理此问题。基本上,您将 overflow: hidden 容器放在要向左滑动的对象周围,同时保持宽度,然后使用 animate('left':'-像素');.你的 div 必须相对定位才能工作。请参见下面的示例。

$(document).ready(function(){
$('.slideLeft').click(function(){
$('.slider').animate(
{'left':'-600px'},
1000,
function(){
$('.slider').hide();
}
);
});
});
.slider{
height: 300px;
width: 600px;
font-size: 20px;
background-color: yellow;
position: relative;
}
.container{
border: 1px solid red;
height: 300px;
width: 600px;
background-color: silver;
overflow: hidden;
}
.slideLeft{
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider">
Hi, I have some content!
</div>
</div>
<button class="slideLeft">Slide me left!</button>

祝你好运!

关于javascript - 在保持 div 大小的情况下从左向右或右向左滑动 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43027274/

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