Chrome中的动画错误

Bug with animations in Chrome

本文关键字:错误 动画 Chrome      更新时间:2023-09-26

在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() {块中,这将保证此代码块只执行一次。

这是你原来小提琴的一个工作修改版本,添加了一行:演示