slideUp 和 slideDown 动画在第一次使用后不起作用
slideUp and slideDown animation does not work after first use
我已经使用 jQuery 构建了类似下拉菜单的东西,但它只适用于前两次点击,然后就不行了。我怎样才能做一个下拉?可以用循环来完成吗? (我还没有学过循环,所以任何解决方案都可以。)
对于每个 SLIDEUP 和 SLIDEDOWN,我想制作不同的时间....
jQuery(document).ready(function() {
jQuery(".click-on").click(function() {
jQuery(".box").slideUp(2000, function() {
jQuery(".click-on").click(function() {
jQuery(".box").slideDown(500);
});
return false;
});
return false;
});
});
.box {
width: 300px;
height: 300px;
background-color: skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fan">THIS IS A FAN</p>
<p id="gun">THIS IS A GUN</p>
<p class="click-on">Click Here</p>
<div class="box"></div>
你想实现这样的目标吗?
$(document).ready(function(){
$(".click-on").click(function(){
$('.box').slideToggle();
});
});
@hetious 的回答是我会给出的 - 但刚刚看到向上滑动和向下滑动应该有不同时间的评论,你必须改为这样做。基本上,检查当您单击该框是否可见时,并相应地 slideUp 或 dlideDown:
jQuery(document).ready(function() {
jQuery(".click-on").click(function() {
var box = jQuery(".box");
if (box.is(":visible")) {
box.slideUp(2000);
}
else {
box.slideDown(500);
}
});
);
(请注意,我已经为 jQuery(".box")
提取了一个变量,只是为了节省一些输入。您还可以使用 $
作为 jQuery
的别名来节省更多(这不起作用的唯一原因是,如果您正在使用另一个定义全局 $
变量的库,少数人会这样做。)
这是因为你误解了.click()
函数的意思
.click()
设置每次从所选 DOM 触发点击事件时的处理函数。
由于您在 .slideUp()
的回调中调用了另一个 .click()
,您实际上是在替换处理函数。在您当前的逻辑中,明显的解决方法是在每次点击后进行无限回调,例如:
jQuery(".click-on").click(function(){
jQuery(".box").slideUp(2000, function(){
jQuery(".click-on").click(function(){
jQuery(".box").slideDown(500,function(){
jQuery(".click-on").click(function(){
jQuery(".box").slideUp(2000, function(){//Repeating callbacks... ...
});
});
});
});
说真的,这很糟糕。这样的实现不应该做。
相反,您最好对每次点击进行条件检查,这样逻辑将自行决定应该调用 .slideUp()
还是 .slideDown()
。应该是
$(".click-on").click(function(){//you can also use $ instead of jQuery
//do some conditional check here
if(isSlidedUp)$(".box").slideDown(1000);
else $(".box").slideUp(1000)
});
或者更好的是你使用 .slideToogle()
.
$(".click-on").click(function(){
$(".box").slideToggle(1000)
}
我已经使用 jQuery 构建了类似下拉菜单的东西,但它只适用于前两次点击,然后就不行了。我怎样才能做一个下拉?可以用循环来完成吗? (我还没有学过循环,所以任何解决方案都可以。)
对于每个 SLIDEUP 和 SLIDEDOWN,我想制作不同的时间....
jQuery(document).ready(function() {
jQuery(".click-on").click(function() {
jQuery(".box").slideUp(2000, function() {
jQuery(".click-on").click(function() {
jQuery(".box").slideDown(500);
});
return false;
});
return false;
});
});
.box {
width: 300px;
height: 300px;
background-color: skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fan">THIS IS A FAN</p>
<p id="gun">THIS IS A GUN</p>
<p class="click-on">Click Here</p>
<div class="box"></div>
你想实现这样的目标吗?
$(document).ready(function(){
$(".click-on").click(function(){
$('.box').slideToggle();
});
});
@hetious 的回答是我会给出的 - 但刚刚看到向上滑动和向下滑动应该有不同时间的评论,你必须改为这样做。基本上,检查当您单击该框是否可见时,并相应地 slideUp 或 dlideDown:
jQuery(document).ready(function() {
jQuery(".click-on").click(function() {
var box = jQuery(".box");
if (box.is(":visible")) {
box.slideUp(2000);
}
else {
box.slideDown(500);
}
});
);
(请注意,我已经为 jQuery(".box")
提取了一个变量,只是为了节省一些输入。您还可以使用 $
作为 jQuery
的别名来节省更多(这不起作用的唯一原因是,如果您正在使用另一个定义全局 $
变量的库,少数人会这样做。)
这是因为你误解了.click()
函数的意思
.click()
设置每次从所选 DOM 触发点击事件时的处理函数。
由于您在 .slideUp()
的回调中调用了另一个 .click()
,您实际上是在替换处理函数。在您当前的逻辑中,明显的解决方法是在每次点击后进行无限回调,例如:
jQuery(".click-on").click(function(){
jQuery(".box").slideUp(2000, function(){
jQuery(".click-on").click(function(){
jQuery(".box").slideDown(500,function(){
jQuery(".click-on").click(function(){
jQuery(".box").slideUp(2000, function(){//Repeating callbacks... ...
});
});
});
});
说真的,这很糟糕。这样的实现不应该做。
相反,您最好对每次点击进行条件检查,这样逻辑将自行决定应该调用 .slideUp()
还是 .slideDown()
。应该是
$(".click-on").click(function(){//you can also use $ instead of jQuery
//do some conditional check here
if(isSlidedUp)$(".box").slideDown(1000);
else $(".box").slideUp(1000)
});
或者更好的是你使用 .slideToogle()
.
$(".click-on").click(function(){
$(".box").slideToggle(1000)
}