- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
如何防止 openContent();踢 $("#load-content").on("transitionend
每次我点击 .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();
});
}
}
最佳答案
通常,您应该为事件命名空间,并在触发后关闭
事件
$el.on('transitionend.mynamespace' function(){
$el.off('transitionend.mynamespace')
});
例子:
$dropdown.on('transitionend.fadein' function() {
// some function to be called on transitionend
doSomething();
// event will not be called again
$dropdown.off('transitionend.fadein')
});
更新
适应你的代码
(您还使用了太多的过渡端处理程序)
我创建了一个带有 e 子命名空间的命名空间所以现在你可以说.off('transitionend.loadcontent')
.off('transitionend.loadcontent.open')
.off('transitionend.loadcontent.close')
试试哪个能满足你的需求
您通常应该阅读以下内容:http://api.jquery.com/event.namespace/
而且代码看起来也不是太神奇。
您应该考虑更重要的编码风格和缓存选择器,以提高可读性和性能。例如。我用 '
替换了所有 "
因为你使用的是混合引号。也许在你的编辑器中运行 jsHint 并缓存所有需要多次的元素。但这对于这件事的工作并不重要。
$('.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.loadcontent.open webkitTransitionEnd.loadcontent.open', function() {
$(this).addClass('animate');
var body = $('body,html');
body.animate({
scrollTop: 0
}, 800);
$('#load-content').off('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open');
});
}
function closeContent(ele) {
var Loaded = !$(ele).closest('.container').hasClass('loaded');
if (!Loaded) {
$('.animate').removeClass('animate');
$('#load-content').on('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close', function() {
$('.loaded').removeClass('loaded');
$('#show-content').remove();
});
$('#load-content').off('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close');
}
}
关于javascript - jquery transitionend 函数 kiks 每次我重复点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22323929/
我正在尝试使用 jQuery 和 css 转换对一些动画进行排序。看起来容器宽度应该在小部件完成从“顶部”css 更改的转换之前进行动画处理,但它们是一起触发的。 为什么 widget
我想在项目上的波纹动画执行后执行一个函数。我目前正在使用以下代码: Proceed 这是一张带有图像和文本的卡片。当
我向 div 添加了一个 transitionend 事件监听器。此 div 具有在某些元素上具有过渡效果的子元素。我希望 transitionend 事件只针对我添加它的元素触发,这是一个错误吗?或
我有多个元素,每个元素都以(某种程度上)持续时间进行动画处理。我使用 CSS3 转换动画,使用 jQuery 库和来自 David Walsh 的 transitionend 辅助函数. 我的问题是
我有一些 javascript 会触发一些样式更改,从而导致 CSS 转换。 我应该如何挂接一个将在转换完成后执行的回调。显然,在旧版浏览器中,它会立即转换,但这些浏览器也无法识别 transitio
我有以下代码,我的问题是 transitionend 事件被触发了两次。我不知道是什么原因造成的。我怀疑 vendor 前缀导致了它,但事实并非如此。即使我只留下 transitionend 和 tr
我想了解为什么以下代码会以指数方式复制 transitionend 的返回值。 这对我来说没有任何意义,因为它们应该具有相同的行为并且应该只执行一次。 下面评论了预期的行为。 (function()
我需要一个特殊的类似 transitionend 的事件,该事件在所有转换完成后触发一次,或者如果 CSS 中没有定义转换则立即触发。 这是我到目前为止所想到的: (function($){ $.
在下面的示例中,我正在使用 CSS 进行 background-color 转换,并尝试处理两个 div 的 transitionend 事件。 不幸的是,transitionend 不会为 div2
我有一个 HTML 元素,我附加了一个 webkitTransitionEnd 事件。 function transEnd(event) { alert( "Finished transiti
我似乎无法让这个过渡的开始部分起作用,只有结束部分。 我之所以按照我的方式构建我的 html,是因为我需要使用 display: none 和 display:block 来实际删除元素文档流。使用
我为 CSS 关键帧动画创建了一个非常基本的测试,包括“ontransitionend”的事件监听器 - 但无论我使用什么变体,这个“过渡结束”监听器都不会触发。 (我的完整代码包含所有 vendor
我正在尝试编写一些具有 webkitTransitionEnd eventListener 回调函数的东西,但由于某种原因 eventListener 被触发了两次(doSomething 被执行了两
我有一个小应用程序,它使用 CSS3 添加和删除 .is-active 动画部分,我需要从中删除 .is-active元素 .resulting-page 然后在 transitionend 上将 .
closeContent() function 有一些问题,我不知道如何在每次单击 .show-content< 时阻止它运行. transitionend 基本上不应该踢两次。 任何帮助将不胜感激。
我想创建一个自定义事件来处理 transitionend 事件的所有不同 vendor 前缀版本(即 webkitTransitionEnd、mozTransitionEnd 、msTransitio
我有两个 div 元素,即 .parentDiv 和 .childDiv 我正在使用 css transition 来为两者设置动画。 .childDiv 应首先为其不透明度设置动画,然后在 tran
检查一下: http://jsfiddle.net/jqs4yy0p/ JS $('div').addClass('switch').on('transitionend', function(e){
我试图让 mouseover 事件监听器仅在 css 转换结束时触发。我尝试在 css 转换结束时提醒一条随机消息,它确实按预期工作(仅在结束时显示消息)。但出于某种原因,mouseover 事件甚至
我有一个切换器,我正在使用 jQuery 调用其 checked 状态。每次我单击从未选中切换到选中时,控制台都会记录 “do this!” 两次。为什么此函数会触发两次?让它触发一次的解决方法是什么
我是一名优秀的程序员,十分优秀!