Chrome中的动画错误
Bug with animations in Chrome
在Firefox中,这段代码运行得很好,但在Chrome中,在最后一个活动项关闭后,这部分的所有内容都不会显示。第五项,如果你仔细检查订单中的所有项目。
小提琴。
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动画结束动画结束
如果你在这个修改过的fiddle中查看控制台,你会看到我设置的notActivedItemsCount
低于零。这意味着$('.markets-item:not(.active):last').one(animatedend)
被调用的次数超过了它应该调用的次数。
在同一代码块中确实有一个.animate()
,因此尚不清楚这是否会导致竞争条件,因为我们不能保证$('.markets-item:not(.active):last')
(列表中的最后一个元素)是也是完成动画的最后一个子元素。
在第二个修改的小提琴中,我添加了
notActivedItems.unbind(animatedend);
在您的.one(animatedend, function() {
块中,这将保证此代码块只执行一次。
这是你原来小提琴的一个工作修改版本,添加了一行:演示
相关文章:
- 照片滑动:关闭图库会为错误的矩形(缩略图)添加动画效果
- 找不到在 create-js 中运行的动画,未列出任何错误
- 使用动画时出现反应JS错误
- Jquery动画错误“;ReferenceError:$未定义“;
- 3ds max>collada>threejs动画错误;缩放超出界限”;
- jQuery动画没有在对象上运行(或引发错误)
- jQuery动画函数回调错误
- 边动画:动画缩放错误
- Javascript图像动画闪烁图像错误
- jQuery,动画和动画返回.回调函数错误?:S
- JavaScript/jQuery动画错误:未捕获的语法错误:意外的令牌}
- 动画加载到错误的位置
- JQuery 多个加载动画循环,具有多个选项卡的错误
- jQuery SVG插件转换动画错误
- 角度动画中的奇怪错误.js
- Chrome 中的 Webkit 动画迭代计数错误
- EaselJS 精灵表动画在画布上不可见,但没有错误
- 未捕获的类型错误:使用 ig 时,未定义不是一个函数.动画表
- Safari 中的 SVG SMIL 动画错误
- 动画函数中的 JavaScript 错误