在Firefox中，此代码可完美运行，但在Chrome中，在最后一个活动项目关闭后，此部分中的所有内容均不会显示。第五项，如果您遍历订单中的所有项。
FIDDLE。
JS：
var markets = {
radius: 250, // in px
init: function () {
$('.markets-item a').click(function (e) {
e.preventDefault();
var market = $(this).parent('.markets-item');
if (market.hasClass('active')) {
markets.showMarkets(market);
return false;
}
markets.showItem(market);
return false;
});
$('#markets-wrap').css('min-height', $('#markets-wrap').height() + 'px');
},
showItem: function (market) {
$('.markets-item').removeClass('active fadeIn').removeAttr('style');
market.addClass('active');
var notActivedItems = $('.markets-item:not(.active)');
notActivedItems.addClass('fadeOut');
$('.markets-item:not(.active):last').one(animatedend, function () {
var offset = market.position();
market.data('top', offset.top)
.data('left', offset.left)
.css({
position: 'absolute',
top: offset.top + 'px',
left: offset.left + 'px'
})
.animate({
top: 0,
left: 7
}, 0, function () {
notActivedItems.hide().removeClass('fadeOut');
markets.showSubmarkets(market);
var img = market.children('a').children('img');
market.data('src', img.attr('src'));
img.attr('src', 'images/icons/back.png');
});
});
},
showMarkets: function (market) {
market.children('a').children('img').attr('src', market.data('src'));
var submarkets = $('.submarket:visible');
if (0 === submarkets.length) {
markets._show(market);
return;
}
submarkets.addClass('fadeOut');
$('.submarket:visible:last').one(animatedend, function () {
submarkets.removeClass('fadeOut').hide();
markets._show(market);
});
},
_show: function (market) {
var notActivedItems = $('.markets-item:not(.active)');
market.animate({
top: market.data('top') + 'px',
left: market.data('left') + 'px'
}, 0, function () {
market.removeAttr('style').removeClass('active');
notActivedItems.show().addClass('fadeIn').one(animatedend, function () {
$(this).removeClass('fadeIn');
});
});
},
showSubmarkets: function (market) {
var items = market.children('.submarket');
if (0 === items.length) return;
var delta = Math.PI / 3 / items.length;
var x = 0,
y = 0,
angle = 0;
for (var i = 0; i < items.length; i++) {
items.eq(i).css({
left: markets.radius * Math.cos(angle) + 'px',
top: markets.radius * Math.sin(angle) + 'px',
display: 'list-item'
})
.addClass('animated fadeIn')
.one(animatedend, function () {
$(this).removeClass('fadeIn');
});
angle += delta;
}
}
};
HTML：
<section id="markets">
<div class="container">
<h3 class="text-center">KEY SECTORS</h3>
<div class="row text-center" id="markets-wrap">
<ul class="markets-container">
<li class="markets-item">
<a href="#">
<img src="images/icons/food.png" class="img-responsive"><br>
Food and Drink
</a>
<div class="submarket">Hot and Cold food containers/boxes</div>
<div class="submarket">Hot and Cold drink cups</div>
<div class="submarket">Bags (paper, non-woven, fabric)</div>
<div class="submarket">Postal boxes</div>
<div class="submarket">Printed ribbon</div>
<div class="submarket">Sticky labels</div>
<div class="submarket">Grease proof paper</div>
<div class="submarket">Custom retail packaging</div>
</li>
<li class="markets-item">
<a href="#">
<img src="images/icons/fashion.png" class="img-responsive"><br>
Fashion and Jewellery
</a>
<div class="submarket">Retail boxes</div>
<div class="submarket">Luxury jewellery boxes</div>
<div class="submarket">Exclusive souvenir boxes</div>
<div class="submarket">Shopping bags</div>
<div class="submarket">Garment bags</div>
<div class="submarket">Printed ribbon</div>
<div class="submarket">Tissue paper</div>
<div class="submarket">Fabric pouches</div>
<div class="submarket">Hat boxes</div>
</li>
<li class="markets-item">
<a href="#">
<img src="images/icons/bakery.png" class="img-responsive"><br>
Bakery and Confectionery
</a>
<div class="submarket">Cake boxes</div>
<div class="submarket">Specialist cake bags </div>
<div class="submarket">Bakery goods boxes</div>
<div class="submarket">Printed ribbon</div>
<div class="submarket">Cake trays</div>
<div class="submarket">Tin packaging</div>
<div class="submarket">Luxury confectionery boxes</div>
<div class="submarket">Bags</div>
<div class="submarket">Sticky labels</div>
</li>
<li class="markets-item">
<a href="#">
<img src="images/icons/cosmetics.png" class="img-responsive"><br>
Cosmetics
</a>
<div class="submarket">Glassware</div>
<div class="submarket">Custom retail packaging</div>
<div class="submarket">Luxury boxes</div>
<div class="submarket">Bags</div>
<div class="submarket">Specialist perfume labels</div>
</li>
<li class="markets-item">
<a href="#">
<img src="images/icons/goods.png" class="img-responsive"><br>
Place for your sector
</a>
<div class="submarket">As trendsetters and true connoisseurs of packaging we are always excited to explore new
grounds across the industry. If your sector or a product you are looking for, is not listed, please do get in touch. </div>
</li>
</ul>
</div>
</div>
</section>
最佳答案
看起来，即使仅在一个元素上设置了$('.markets-item:not(.active):last').one(animatedend)，它也会被触发多次。这可能是因为animatedend代表事件的集合：
webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend
如果在this modified fiddle中查看控制台，将会看到我设置的notActivedItemsCount低于零。这意味着$('.markets-item:not(.active):last').one(animatedend)被调用的次数超过了应有的次数。
您在同一代码块中确实有一个.animate()，所以我们不清楚这是否导致竞争情况，因为我们不能保证$('.markets-item:not(.active):last')（列表中的最后一个元素）也是最后一个要完成的元素动画。
在此second modified fiddle中，我添加了
notActivedItems.unbind(animatedend);
在您的
.one(animatedend, function() {块中，这将确保该代码块仅执行一次。这是原始提琴的工作版本，修改后添加了以下一行：demo