Question

我已根据我的目的调整了此website的交火图像网格脚本，您可以看到结果here。

由于某些原因，不透明度过渡在网格中的每个“框”上都无法正常工作。我下载演示时工作正常，但没有修改后的CSS /脚本。在脚本中，我只更改了框的尺寸和移动指标的计算。在CSS中我改变了框的宽度。

有人能说出为什么不透明度过渡不正常吗？

这是交火脚本：

(function($){   

    $(function(){

        var boxWidth = 10 + 200;
        var currentBox;
        var currentRow;
        var currentCol;

        var gridWidth = $('#container').width();
        var n = gridWidth / boxWidth;
        var numColumn = Math.floor(n);


        $('div.box:nth-child(' + numColumn + 'n)').addClass('lastBox');
        $('div.box:nth-child(' + numColumn + 'n + 1)').addClass('firstBox');

        $(window).resize(function() {

                    $('div.box').removeClass('lastBox').removeClass('firstBox');
                    var gridWidth = $('#container').width();
                    var n = gridWidth / boxWidth;
                    var numColumn = Math.floor(n);

                    $('div.box:nth-child(' + numColumn + 'n)').addClass('lastBox');
                    $('div.box:nth-child(' + numColumn + 'n + 1)').addClass('firstBox');

        });


        $('#container').hover(
                  function () {
                    $('#container .box').animate({opacity: '.25'}, {queue: false});
                 }, 
                  function () { 
                    $('#container .box').animate({opacity: '1'}, {queue: false});
                    $('#topIndicator-wrapper').animate({left: 0}, {queue: false});
                    $('#leftIndicator-wrapper').animate({top: 10}, {queue: false});
                    $('#leftIndicator-wrapper').css({position: 'absolute'});
                 }
        );      
        $('.box').hover(
                  function () {
                    $('div.box').removeClass('lastBox').removeClass('firstBox');
                    var gridWidth = $('#container').width();
                    var n = gridWidth / boxWidth;
                    var numColumn = Math.floor(n);

                    $('div.box:nth-child(' + numColumn + 'n)').addClass('lastBox');
                    $('div.box:nth-child(' + numColumn + 'n + 1)').addClass('firstBox');

                    currentBox = $(this).parent().children().index(this) + 1;
                    r = currentBox / numColumn;
                    currentRow = Math.ceil(r);
                    currentCol = currentBox - numColumn*(currentRow-1);

                    $('#topIndicator-wrapper').animate({left: 210*(currentCol-1)+50}, {queue: false});
                    $('#leftIndicator-wrapper').animate({top: 10+210*(currentRow-1)+50}, {queue: false});   
                    $('#leftIndicator-wrapper').css({position: 'relative'});            
                    $(this).prevUntil("div.lastBox").animate({opacity: '.5'}, {queue: false});
                    $(this).nextUntil("div.firstBox").animate({opacity: '.5'}, {queue: false});
                    $('div.box:nth-child(' + numColumn + 'n + ' + currentCol +')').animate({opacity: '.50'}, {queue: false});
                    $(this).animate({opacity: '1'}, {queue: false});
                 }, 
                  function () { 
                    $('.box').animate({opacity: '.25'}, {queue: false});
                 }
        );


    }); // end of document ready
})(jQuery); // end of jQuery name space

谢谢，

尼克

Answer 1

您的#container未设置为清除其中的浮动元素（在屏幕顶部保持非常小的高度），因此$('#container').hover脚本未激活。将overflow: auto添加到#container的css中修复它。

试图让悬停动画在交火图像网格脚本上工作

1 个答案: