在用户按下“SEE MORE”按钮后,如何使用jquery在div中滑动?
这是我的代码。但它不起作用:(
code here <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var boxWidth = $("#leftpart").width();
$("#press button").click(function(){
$(this).next().animate({
width: 'toggle'
});
});
});
<div id="another" style="padding: 120px;">
<div class="container">
<div class="row">
<!-- right -->
<div class="col-lg-6 col-md-6">
<center><button type="button" class="seemore" id="press">See More</button></center>
<div id="leftpart" style="height: 540px; margin-right: 50px; background: yellow; display: none; position: relative;">
<p>HELLOOOOOOO</p>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
也许尝试这样的事情?在滑动部件中添加一个类 并在CSS中为该类定义动画?
.more {
height: 540px;
margin-right: 50px;
background: yellow;
display: none;
position: relative;
}
.animate.slideIn {
transform: translateX(0);
animation: slideFromLeft 0.3s ease;
display: block;
}
@keyframes slideFromLeft {
from {
transform: translateX(-50%);
display: none;
}
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="another" style="padding: 120px;">
<div class="container">
<div class="row">
<!-- right -->
<div class="col-lg-6 col-md-6">
<center><button type="button" class="seemore" id="press">See More</button></center>
<div id="leftpart" class="more animate">
<p>HELLOOOOOOO</p>
</div>
</div>
</div>
</div>
</div>
&#13;
{{1}}&#13;
答案 1 :(得分:1)
你的按钮“#press”里面没有任何子按钮,所以你不能用$(“#按钮”)匹配任何元素。 此外,您的按钮后面没有下一个元素,因此您不能将元素与$(this).next()匹配。
您需要了解有关JQuery / CSS选择器的更多信息;)
$(document).ready(function () {
var boxWidth = $("#leftpart").width();
$("#press").click(function(){
$("#leftpart").animate({
width: 'toggle'
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="another" style="padding: 120px;">
<div class="container">
<div class="row">
<!-- right -->
<div class="col-lg-6 col-md-6">
<center><button type="button" class="seemore" id="press">See More</button></center>
<div id="leftpart" style="height: 540px; margin-right: 50px; background: yellow; display: none; position: relative;">
<p>HELLOOOOOOO</p>
</div>
</div>
</div>
</div>
</div>