Попытка получить анимацию при наведении на скрипт сетки изображений CrossFire - PullRequest
Новая
       7

Попытка получить анимацию при наведении на скрипт сетки изображений CrossFire

0 голосов
/ 10 декабря 2011

Я адаптировал скрипт сетки перекрестного огня с этого веб-сайта для своих целей, и вы можете увидеть результат здесь .

По какой-то причине непрозрачностьпереходы не работают правильно на каждом «ящике» в сетке.Они отлично работают, когда я загружаю демо, но не с моим измененным 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

Спасибо,

Ник

1 Ответ

1 голос
/ 10 декабря 2011

Ваш #container не был настроен для очистки плавающих элементов внутри него (оставаясь на очень маленькой высоте в верхней части экрана), поэтому сценарий $('#container').hover не активировался. Добавление overflow: auto к CSS #container исправило это.

...