Jquery 停止mouseleave上运行的功能

我创建了一个函数，该函数通过一组div循环并提取

数据悬停

属性。然后，我将这些值存储在一个数组中，并在其中循环，生成一个图像，然后将它们附加到另一个div。我添加了一个

setTimeOut

函数来延迟这些图像的加载，我使用css动画来创建一个接一个加载图像的效果

此函数仅运行一次，当我将鼠标悬停在父div“

缩略图包装器”

”上时发生。一旦它们被加载到DOM中，我就创建了另一个函数，该函数在

mouseleave

上启动，并将隐藏的类添加到滚动图像中

然后，我有另一个在mouseover上启动的函数，它的工作原理与第一个函数相同，但这次只是添加了类“

fadeIn

”，并动态添加了一个

z-index

值，这样它们看起来就可以相互叠加加载

当所有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;
        });

      }
    });

函数rollvirimages（）{
$（'.thumbnail wrapper'）.one（'mouseover'，function（）{
var rollovers=$（this.find（'.rolloverimages div'）；
var时间=0；
滚动。每个（函数（）{
setTimeout（函数（）{
var datasrc=$（this.data（'hover'）；
变量img=$（'
如果鼠标在计数结束前离开，则会发生这种情况

    <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;
        });

      }
    });

函数rollvirimages（）{
$（'.thumbnail wrapper'）.one（'mouseover'，function（）{
var rollovers=$（this.find（'.rolloverimages div'）；
var时间=0；
var$e=$（本）；
$e.attr（“数据持久化”，true）；
滚动。每个（函数（）{
setTimeout（函数（）{
如果（$e.attr（“数据持久化”））{
var datasrc=$（this.data（'hover'）；
var img=$（'请单击
按钮并创建一个Hi Brian，谢谢你的回答。但是，我已经尝试了你的代码，问题仍然存在。如果鼠标离开div，我基本上需要停止第二个mouseover函数的运行。目前，如果我离开div，第二个mouseover函数将继续运行，因此它没有机会运行删除类和z索引