javascript - jQuery 悬停缩略图，但需要时间更新主镜头，必须 catch

Question

我正在寻找更好的解决方案来解决我面临的这个问题。

如果您将鼠标悬停在缩略图上，它会淡出较大的镜头并淡入新的镜头，这很好，但是当转到目标缩略图并且您的鼠标再悬停一些时，它会更改为您的鼠标经过并拍摄的其他缩略图是时候 catch 来了。有什么办法可以解决这个问题吗？也许某种计时器或其他东西，或者也许是一个更好的解决方案？

if ($('#product_color_select li').hasClass("selected")) {
  var product_color_select_first = $("#product_color_select li.selected").attr('data-larger');
  $("#larger-colour").fadeIn("slow", function() {
    $('#larger-colour').addClass(product_color_select_first);
  });
}

$("#product_color_select li").on("mouseover", function() {
  var select_product_swatch = $(this).attr('data-larger');
  var thumbnail = $('#larger-colour');

  thumbnail.fadeOut("slow", function() {
    thumbnail.removeClass();
  });

  thumbnail.queue(function() {
    $('#larger-colour').addClass(select_product_swatch);
    $(this).dequeue();
  });

  thumbnail.fadeIn("slow");
});

#product_color_select {
  width: 76%;
  float: left;
}
#product_color_select li {
  display: inline-block;
  width: 30px;
  height: 25px;
  text-indent: -999999em;
  cursor: pointer;
  margin: 0 2px 5px 0;
}
#larger-colour {
  float: right;
  max-width: 86px;
  width: 86px;
  height: 62px;
}
/* interior colours */

#product_color_select li.eco-weave,
#larger-colour.eco-weave {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/eco-weave.png');
}
#product_color_select li.aubergine-dream,
#larger-colour.aubergine-dream {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/aubergine-dream.png');
}
#product_color_select li.lime-citrus,
#larger-colour.lime-citrus {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/lime-citrus.png');
}
#product_color_select li.blue-jazz,
#larger-colour.blue-jazz {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/blue-jazz.png');
}
#product_color_select li.sakura-pink,
#larger-colour.sakura-pink {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/sakura-pink.png');
}
#product_color_select li.hot-chocolate,
#larger-colour.hot-chocolate {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/hot-chocolate.png');
}
#product_color_select li.tundra-spring,
#larger-colour.tundra-spring {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/tundra-spring.png');
}
#product_color_select li.black-sapphire,
#larger-colour.black-sapphire {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/black-sapphire.png');
}
#product_color_select li.luscious-grey,
#larger-colour.luscious-grey {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/luscious-grey.png');
}
#product_color_select li.wildberry-deluxe,
#larger-colour.wildberry-deluxe {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/wildberry-deluxe.png');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="fabric-select" id="product_color_select">
  <li class=" aubergine-dream" data-value="745" data-larger="aubergine-dream" title="Aubergine Dream">Aubergine Dream</li>
  <li class=" black-sapphire" data-value="746" data-larger="black-sapphire" title="Black Sapphire">Black Sapphire</li>
  <li class=" wildberry-deluxe" data-value="727" data-larger="wildberry-deluxe" title="Wildberry Deluxe">Wildberry Deluxe</li>
  <li class=" tundra-spring" data-value="747" data-larger="tundra-spring" title="Tundra Spring">Tundra Spring</li>
  <li class="selected luscious-grey" data-value="744" data-larger="luscious-grey" title="Luscious Grey">Luscious Grey</li>
  <li class=" sakura-pink" data-value="743" data-larger="sakura-pink" title="Sakura Pink">Sakura Pink</li>
  <li class=" lime-citrus" data-value="748" data-larger="lime-citrus" title="Lime Citrus">Lime Citrus</li>
  <li class=" eco-weave" data-value="742" data-larger="eco-weave" title="Eco Weave">Eco Weave</li>
  <li class=" blue-jazz" data-value="749" data-larger="blue-jazz" title="Blue Jazz">Blue Jazz</li>
  <li class=" hot-chocolate" data-value="741" data-larger="hot-chocolate" title="Hot Chocolate">Hot Chocolate</li>
</ul>

<div id="larger-colour" class="aubergine-dream" style="display: block;"></div>

Answer 1

您可以通过以下链接查看。

Fiddle

 if ($('#product_color_select li').hasClass("selected")) {
  var product_color_select_first = $("#product_color_select li.selected").attr('data-larger');
  $("#larger-colour").fadeIn("fast", function() {
    $('#larger-colour').addClass(product_color_select_first);
  });
}

$("#product_color_select li").on("mouseover", function() {
  var select_product_swatch = $(this).attr('data-larger');
  var thumbnail = $('#larger-colour');

  thumbnail.fadeOut("fast", function() {
    thumbnail.removeClass();
  });

  thumbnail.queue(function() {
    $('#larger-colour').addClass(select_product_swatch);
    $(this).dequeue();
  });

  thumbnail.fadeIn("fast");
});