クロスファイア画像グリッドスクリプトでホバーアニメーションを試してみる

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スクリプトはアクティブ化されませんでした。 #containerのCSSにoverflow: autoを追加すると修正されました。