快速点击 jquery 动画回调
Fast click on jquery animate with callback
这是code
<div id="button" class="overlay-down">click</div>
$(function () {
$('#button').on('click', function(){
if($(this).hasClass('overlay-down')) {
$(this).removeClass('overlay-down').addClass('overlay-up');
$('#text').stop(true, true).animate({opacity: 0}, 800, function() { // fade #text
$('#overlay').stop(true, true).slideUp(500); // then slideup #overlay
});
} else
if($(this).hasClass('overlay-up')) {
$(this).removeClass('overlay-up').addClass('overlay-down');
$('#overlay').stop(true, true).slideDown(500, function(){ // #overlay come back
$('#text').stop(true, true).animate({opacity: 1}, 800); // then #text come back
});
}
});
})
快速点击时,动画出错 - 叠加层向上滑动,但文本不会淡出。
每次我点击按钮,我想保持正在进行的动画 运行 完成回调动画(不停止动画,不去结束),在进行动画完成之前忽略按钮点击。
我已经尝试过 is(':animated') 检测并删除 stop(true, true),它有效,但是还有其他更简单更好的方法吗?
另外,在上面的代码中,如果我需要使用stop(),我需要为每个动画元素添加stop()?上面的代码我要加上4个stop(),对不对?
谢谢你:)
这段代码没有关于快速点击的问题。
$(function () {
$('#button').on('click', function(){
if($(this).hasClass('overlay-down')) {
$(this).removeClass('overlay-down').addClass('overlay-up');
$('#text').stop(true, true).animate({opacity: 0}, 500);
$('#overlay').stop(true, true).slideUp(800);
} else
if($(this).hasClass('overlay-up')) {
$(this).removeClass('overlay-up').addClass('overlay-down');
$('#overlay').stop(true, true).slideDown(500);
$('#text').stop(true, true).animate({opacity: 1}, 800);
}
});
})
你可以移除点击事件,当你已经点击了它,直到animation
完成,然后你可以重新添加点击事件,以便为下一个动画做好准备。
看到这个FIDDLE
$(function() {
$('#button').on('click', fun);
})
function fun() {
$('#button').off('click', fun);
if ($(this).hasClass('overlay-down')) {
$(this).removeClass('overlay-down').addClass('overlay-up');
$('#text').stop(true, true).animate({
opacity: 0
}, 800, function() { // fade #text
$('#overlay').stop(true, true).slideUp(500, function() {
$('#button').on('click', fun);
}); // then slideup #overlay
});
} else
if ($(this).hasClass('overlay-up')) {
$(this).removeClass('overlay-up').addClass('overlay-down');
$('#overlay').stop(true, true).slideDown(500, function() { // #overlay come back
$('#text').stop(true, true).animate({
opacity: 1
}, 800, function() {
$('#button').on('click', fun);
}); // then #text come back
});
}
}
.wrapper {
width: 300px;
height: 300px;
background: red;
position: relative;
}
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ccc;
opacity: 0.75;
}
#text {
color: #000;
font-weight: 700;
font-size: 20px;
line-height: 300px;
position: relative;
text-align: center;
}
#button {
background: #000;
color: #fff;
width: 300px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<div id="overlay"></div>
<div id="text">
<p>text here text here</p>
</div>
</div>
<div id="button" class="overlay-down">click</div>
这是code
<div id="button" class="overlay-down">click</div>
$(function () {
$('#button').on('click', function(){
if($(this).hasClass('overlay-down')) {
$(this).removeClass('overlay-down').addClass('overlay-up');
$('#text').stop(true, true).animate({opacity: 0}, 800, function() { // fade #text
$('#overlay').stop(true, true).slideUp(500); // then slideup #overlay
});
} else
if($(this).hasClass('overlay-up')) {
$(this).removeClass('overlay-up').addClass('overlay-down');
$('#overlay').stop(true, true).slideDown(500, function(){ // #overlay come back
$('#text').stop(true, true).animate({opacity: 1}, 800); // then #text come back
});
}
});
})
快速点击时,动画出错 - 叠加层向上滑动,但文本不会淡出。
每次我点击按钮,我想保持正在进行的动画 运行 完成回调动画(不停止动画,不去结束),在进行动画完成之前忽略按钮点击。
我已经尝试过 is(':animated') 检测并删除 stop(true, true),它有效,但是还有其他更简单更好的方法吗?
另外,在上面的代码中,如果我需要使用stop(),我需要为每个动画元素添加stop()?上面的代码我要加上4个stop(),对不对?
谢谢你:)
这段代码没有关于快速点击的问题。
$(function () {
$('#button').on('click', function(){
if($(this).hasClass('overlay-down')) {
$(this).removeClass('overlay-down').addClass('overlay-up');
$('#text').stop(true, true).animate({opacity: 0}, 500);
$('#overlay').stop(true, true).slideUp(800);
} else
if($(this).hasClass('overlay-up')) {
$(this).removeClass('overlay-up').addClass('overlay-down');
$('#overlay').stop(true, true).slideDown(500);
$('#text').stop(true, true).animate({opacity: 1}, 800);
}
});
})
你可以移除点击事件,当你已经点击了它,直到animation
完成,然后你可以重新添加点击事件,以便为下一个动画做好准备。
看到这个FIDDLE
$(function() {
$('#button').on('click', fun);
})
function fun() {
$('#button').off('click', fun);
if ($(this).hasClass('overlay-down')) {
$(this).removeClass('overlay-down').addClass('overlay-up');
$('#text').stop(true, true).animate({
opacity: 0
}, 800, function() { // fade #text
$('#overlay').stop(true, true).slideUp(500, function() {
$('#button').on('click', fun);
}); // then slideup #overlay
});
} else
if ($(this).hasClass('overlay-up')) {
$(this).removeClass('overlay-up').addClass('overlay-down');
$('#overlay').stop(true, true).slideDown(500, function() { // #overlay come back
$('#text').stop(true, true).animate({
opacity: 1
}, 800, function() {
$('#button').on('click', fun);
}); // then #text come back
});
}
}
.wrapper {
width: 300px;
height: 300px;
background: red;
position: relative;
}
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ccc;
opacity: 0.75;
}
#text {
color: #000;
font-weight: 700;
font-size: 20px;
line-height: 300px;
position: relative;
text-align: center;
}
#button {
background: #000;
color: #fff;
width: 300px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<div id="overlay"></div>
<div id="text">
<p>text here text here</p>
</div>
</div>
<div id="button" class="overlay-down">click</div>