closeContent()
function
有一些问题,我不知道如何在每次单击 .show-content< 时阻止它运行
.
transitionend 基本上不应该踢两次。
任何帮助将不胜感激。
$('.show-content').on('click', function (e) {
e.preventDefault();
openContent();
});
$('#load-content').on('click','.prev',function (e){
e.preventDefault();
closeContent(this);
});
function openContent(){
$('#load-content').load('../views/product-page.html');
$('.container').addClass('loaded');
$("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
$(this).addClass('animate');
var body = $("body,html");
body.animate({
scrollTop: 0
}, 800);
});
}
function closeContent(ele){
var Loaded = !$(ele).closest('.container').hasClass('loaded');
if (!Loaded) {
$('.animate').removeClass('animate');
$("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
$('.loaded').removeClass('loaded');
$('#show-content').remove();
});
}
}
最佳答案
你不应该嵌套事件......无论如何,作为一个简单的修复,使用 one()
:
$("#load-content").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {...});
关于jquery 如何防止 transitionend 事件被调用两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22325046/