为什么我的瓷砖上的某些斑点会破坏我的动画?

时间:2014-07-30 22:53:53

标签: javascript jquery html css

http://rockforddriveline.com/newrdl/index.html

好吧,我甚至不知道从哪里开始。我甚至不知道什么是破碎的。它只是 坏了。标题下方有5个图块。在这些图块上的特定位置(,我指的是特定的),当您单击时,它会中断动画并导致描述div过早出现。我无法弄清楚是什么造成的。我不能告诉你在哪里点击以实现这一点,因为斑点会根据分辨率和浏览器而变化。我设法在Chrome和Firefox上产生了这个问题,我认为IE和Opera也会这样做。

如果您使用的是1080p显示器上的Chrome或Firefox,那么您应该点击第二个图块,然后点击“小”字样。 http://imgur.com/umgy6Pl

function bannerFader(currentBanner, otherBanners, expandButton, appendInfo){
var disableHover = false;

    $('.append-product-button').hide();
    $(currentBanner).mouseenter(function(){
        if (disableHover == false) {
            $(otherBanners).stop('hoverEvent');
            $(otherBanners).fadeTo(200, .8).queue(null,'hoverEvent');
            $(otherBanners).dequeue();
        }
    });
    $(currentBanner).mouseleave(function(){
        if (disableHover == false) {
            $(otherBanners).stop('hoverEvent');
            $(otherBanners).fadeTo(200, 1).queue('hoverEvent');
            $(otherBanners).dequeue();
        };
    });
    $(expandButton).click(function(){
        disableHover = true;
        $(otherBanners).hide(200, function(){
            $(appendInfo).show(500)
            $('.banner-button').hide();
            $('.append-product-button').show();
        });
    });
    $('#sub, #heading, .append-product-button').click(function(){
        if (disableHover == true) {
            $(appendInfo).hide(300,function(){
                $(otherBanners).show(200);
                $('.banner-one, .banner-two, .banner-three, .banner-four, .banner-five').fadeTo(0, 1);
                $('.banner-button').show();
                disableHover = false;
            });

        };
    });
};

function autoRunner() {
    bannerFader('.banner-one', '.banner-two, .banner-three, .banner-four, .banner-five', '.banner-one','.append-one')
    bannerFader('.banner-two', '.banner-one, .banner-three, .banner-four, .banner-five', '.banner-two','.append-two')
    bannerFader('.banner-three', '.banner-two, .banner-one, .banner-four, .banner-five', '.banner-three','.append-three')
    bannerFader('.banner-four', '.banner-two, .banner-three, .banner-one, .banner-five', '.banner-four','.append-four')
    bannerFader('.banner-five', '.banner-two, .banner-three, .banner-four, .banner-one', '.banner-five','.append-five')
};

编辑7/31/14:可以在1920x1080的所有更新的浏览器中生成故障。

0 个答案:

没有答案