jquery - 停止函数在 mouseleave 上运行
问题描述
我创建了一个函数,它遍历一组 div 并提取data-hover
属性。然后我将这些值存储在一个数组中并遍历它们,生成一个图像,然后将它们附加到另一个 div。我添加了一个setTimeOut
功能来延迟这些图像的加载,并且我正在使用 css 动画来创建它们正在加载的效果。
这个函数只运行一次,当我将鼠标悬停在父 div ' thumbnail-wrapper
' 上时会发生。一旦它们被加载到 DOM 中,我创建了另一个函数,该函数会触发mouseleave
并将隐藏的类添加到翻转图像中。
然后我有另一个在鼠标悬停时触发的函数,它的工作原理与第一个函数相同,但这次只是添加类 ' fadeIn
' 并动态添加一个z-index
值,因此它们看起来是相互叠加的。
如果用户将鼠标悬停在“ thumbnail-wrapper
”上,这一切都有效,因为所有 img 都有时间加载。但是,如果您在计数完成之前离开 div,它会将“隐藏”类添加到父 div,但取决于光标离开的时间,它不会删除类“ FadeIn
”或重置,z-index
因为计数仍在发生.
on.mouseover
如果用户移开光标,有没有办法可以防止计数在“”功能上完成?
function rolloverImages() {
$('.thumbnail-wrapper').one('mouseover', function() {
var rollovers = $(this).find('.rolloverimages div');
var time = 0;
rollovers.each(function() {
setTimeout(function() {
var datasrc = $(this).data('hover');
var img = $('<img class="fadeIn" id="dynamic">');
var imgsrc = img.attr('src', datasrc);
var parent = $(this).parent('.rolloverimages').parent('.thumbnail-wrapper').find('.rolloverloaded');
imgsrc.appendTo(parent);
}.bind(this), time);
time += 200;
});
console.log("images loaded to DOM");
});
$('.thumbnail-wrapper').on('mouseleave', function() {
$(this).find('.rolloverloaded').addClass('hidden');
$(this).find('.rolloverloaded img').removeClass('fadeIn').css({'z-index':'0'});;
});
$('.thumbnail-wrapper').on('mouseover', function() {
var time = 0;
if($(this).find('.rolloverloaded').hasClass('hidden')) {
$(this).find('.rolloverloaded').removeClass('hidden');
$(this).find('.rolloverloaded img').removeClass('fadeIn');
var count = 1;
$(this).find('img').each(function() {
setTimeout(function() {
count++;
$(this).addClass('fadeIn').css('z-index', count);
}.bind(this), time);
time += 200;
});
}
});
如果鼠标在计数完成之前离开,这就是最终发生的情况
<div class="rolloverloaded hidden”>
<img class="" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-4-360x259.jpg" style="z-index: 0;">
<img class="" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-2-360x259.jpg" style="z-index: 0;">
<img class="" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-1-360x259.jpg" style="z-index: 0;">
<img class="" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-6-360x259.jpg" style="z-index: 0;">
<img class="fadeIn" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-7-360x259.jpg" style="z-index: 7;">
<img class="fadeIn" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-3-360x259.jpg" style="z-index: 8;">
<img class="fadeIn" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-8-360x259.jpg" style="z-index: 9;">
<img class="fadeIn" id="dynamic" src="/wp-content/uploads/2018/06/blue-moon-creative-hamilton-self-storage-10-360x259.gif" style="z-index: 10;">
</div>
解决方案
尝试这个...
function rolloverImages() {
$('.thumbnail-wrapper').one('mouseover', function() {
var rollovers = $(this).find('.rolloverimages div');
var time = 0;
var $e = $(this);
$e.attr("data-persist",true);
rollovers.each(function() {
setTimeout(function() {
if ($e.attr("data-persist")) {
var datasrc = $(this).data('hover');
var img = $('<img class="fadeIn" id="dynamic">');
var imgsrc = img.attr('src', datasrc);
var parent = $(this).parent('.rolloverimages').parent('.thumbnail-wrapper').find('.rolloverloaded');
imgsrc.appendTo(parent);
}
}.bind(this), time);
time += 200;
});
console.log("images loaded to DOM");
});
$('.thumbnail-wrapper').on('mouseleave', function() {
$(this).attr("data-persist",false);
$(this).find('.rolloverloaded').addClass('hidden');
$(this).find('.rolloverloaded img').removeClass('fadeIn').css({'z-index':'0'});;
});
$('.thumbnail-wrapper').on('mouseover', function() {
var time = 0;
if($(this).find('.rolloverloaded').hasClass('hidden')) {
$(this).find('.rolloverloaded').removeClass('hidden');
$(this).find('.rolloverloaded img').removeClass('fadeIn');
var count = 1;
$(this).find('img').each(function() {
setTimeout(function() {
if ($(this).attr("data-persist")) {
count++;
$(this).addClass('fadeIn').css('z-index', count);
}
}.bind(this), time);
time += 200;
});
}
});
推荐阅读
- r - 使用索引对一系列列名进行子集化时出错
- ios - Swift - 创建自定义视图的不同实例
- docker - 如何在 kubernetes 部署 yaml 中执行 bash 字符串操作
- python - 即使在语句为真之后,具有不相等操作的while循环也会重复执行
- c - Linux make 第一次运行失败,第二次运行成功
- angular - 如何通过令牌而不是cookie中的jsession访问spring oauth2客户端后端api?
- vb.net - 如何解决登录表单中的 if 语句
- php - 如何使用字母范围按值对数组进行分组
- angular - 为什么我必须调用 subscribe 才能运行我的 http 请求?
- python - Github API 总数和结果不匹配