Question

你可以帮帮我吗？这是一个用于woocommerce产品缩略图的脚本，因此如果用户将鼠标悬停在缩略图上，它将在主产品图像框中显示它。

jQuery(document).on('mouseover','.thumbnails .zoom', function(){
    var photo_fullsize =  jQuery(this).find('img').attr('src').replace('-100x100','');
    jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
    return false;
});

我想为这个jquery脚本添加一点过渡。这是为了防止woocommerce缩略图之间的超快速切换。如果我有很多缩略图，并且我将鼠标放在缩略图上的一个位置并且产品图像的大小不同，则脚本将只闪烁到一个图像到另一个 - 这种类型的错误。我认为在这里添加延迟可能会让用户有时间将鼠标从下一个缩略图移开。

谢谢！

Answer 1

您可以使用setTimeout：

var delay = 3000; //delay in ms
jQuery(document).on('mouseover','.thumbnails .zoom', function(){
  setTimeout(
    function() {
      var photo_fullsize =  jQuery(this).find('img').attr('src').replace('-100x100','');
      jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
      return false;
    }
  , delay);
});

为woocommerce jquery脚本添加时间延迟

1 个答案: