Question

我创建了一个函数，该函数遍历一组div并提取data-hover属性。然后，我将这些值存储在数组中并遍历它们，生成图像，然后将它们附加到另一个div。我添加了一个setTimeOut函数来延迟加载这些图像，并且我正在使用css动画来创建它们正在逐一加载的效果。

此功能仅运行一次，当我将鼠标悬停在父div'thumbnail-wrapper'上时会发生。将它们加载到DOM后，我创建了另一个函数，该函数在mouseleave上触发，并将隐藏的类添加到过渡图像中。

然后我有另一个函数在鼠标悬停时触发，该函数与第一个函数有效地起作用，但是这次仅添加了类“ fadeIn”并动态添加了一个z-index值，因此它们似乎已加载在彼此之上。

如果所有img都有时间加载，那么用户将鼠标悬停在“ thumbnail-wrapper”上，这一切都将起作用。但是，如果您在计数结束之前离开div，则会将“ hidden”类添加到父div中，但要根据光标离开的时间进行操作，它不会删除类“ FadeIn”或重置{ {1}}，因为计数仍在发生。

如果用户删除了光标，有没有办法防止计数在'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;
        });

      }
    });

Answer 1

尝试一下...

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

      }
    });

停止在mouseleave上运行功能

1 个答案: