哈弗動畫包含父

Question

內我有一個的jsfiddle這裏有一個不錯的懸停效果我的工作，但我想知道是否有可能有包含在父

http://jsfiddle.net/cyXKx/

內懸停效果一切都運作良好，除了最右邊的列表項目和最後一排懸停在網格之外。理想情況下，我希望它們從右側的右上角和底部的左下角逐漸增長。

我希望這是有道理的，我只想知道它是否可能？

下面是HTML

<ul class="tearsheets"> 
    <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li> 
    <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li> 
     <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li> 
     <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li> 
      <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li> 
      <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li> 
       <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li> 
       <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li> 
        <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li> 
        <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li> 
         <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li> 
         <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li> 

    </ul> 

和CSS

ul.tearsheets{ 
     overflow:hidden; 
     clear:both; 
     max-width:100%; 
     position:relative; 
    } 
    .tearsheets li span { 
     display:inline-block; 
     vertical-align:middle; 
     height:110px; 

    } 
    .tearsheets{ 
     padding:18px 18px 108px 18px; 
    } 
    .tearsheets li{ 
     float:left; 
     line-height:110px; 
     width:160px; 
     list-style:none; 
     height:110px; 
     background-color:#9C9B9B; 
     text-align:center; 
     position:relative; 
     margin:0 1px 1px 0; 
     -moz-transition: all 0.25s ease; 
     -webkit-transition: all 0.25s ease; 
    } 
    .tearsheets li a{ 
     display:block; 

    } 
    .tearsheets li span img{ 
     padding-top:10px; 
     z-index: 0; 
     max-height:90px; 
     -moz-transition: all 0.25s ease; 
     -webkit-transition: all 0.25s ease; 
    } 
    .tearsheets li a:hover{ 
     height:221px; 
     background-color:#9C9B9B; 
     width:321px; 
     position:absolute; 
     z-index:1000000; 
    } 
    .tearsheets li a:hover span{ 
     padding-top:10px; 

    } 
    .tearsheets li a:hover span img{ 
     max-height:180px; 
    } 

如果有人可以幫助我這個這將是驚人的，如果它適用於IE8-9甚至更好 - 我不要擔心現階段的IE8動畫。

非常感謝。

Answer 1

當然可以。這是result。

我做了什麼。

第一個： HTML保持不變。

二：對CSS我發明你<li>兩大類：last-x和last-y。第一種方法是，它沒有任何項目（即使在列表的末尾）。第二個是相同的，但是垂直看。

CSS代碼：

.tearsheets li.last-x a:hover{ left: -161px; } 
.tearsheets li.last-y a:hover{ top: -111px; } 

三：加入jQuery和灑一些jQuery的魔術就可以了。

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script> 
$(function() { 
    var $tearsheets = $(".tearsheets"); 
    var line_length = Math.floor($tearsheets.width()/$tearsheets.find("li:first").width()); 
    var items_count = $tearsheets.find("li").length; 
    var full_lines_count = Math.floor(items_count/line_length); 
    var index = 0; // somehow the internal index inside .each() doesn't work :-/ 
    $tearsheets.find("li").each(function(i) { 
     var item_position = i + 1; 
     var items_on_the_right = line_length - (i % line_length) - 1; 
     //console.log(items_on_the_right + ", " + items_count + ", " + item_position); 
     if (items_on_the_right > (items_count - item_position)) 
      items_on_the_right = items_count - item_position; 
     if (items_on_the_right == 0) 
      $(this).addClass("last-x"); 

     var current_line = Math.ceil(item_position/line_length); 
     $(this).attr("data-current-line", current_line); 
     if (current_line >= full_lines_count) 
      $(this).addClass("last-y"); 
    }); 
}); 
</script> 

Answer 2

我認爲最好的方法是使用CSS3。您只需添加以下內容即可：

ul.tearsheets > li:nth-child(even):hover { 
    position:relative; 
    right:161px; 
} 

這裏是jsfiddle。

隨着li將從右向左移動，但我真的不知道這是你想要的。您可以通過添加以下屬性改變這種行爲：

transition:none; 
-webkit-transition: none; 
-moz-transition:none; 
-o-transition:none; 

這裏jsfiddle。

請注意，因爲我使用了CSS3選擇器，所以此解決方案在舊版瀏覽器（例如IE8）中不起作用。

Answer 3

相同的思路duality_，但執行的方式有點不同：Demo

新建CSS：

.tearsheets li.right a:hover { 
    right: 0; 
} 
.tearsheets li.bottom a:hover { 
    bottom: 0; 
} 

JS（使用jQuery）：

function adjust() { 
    $('ul.tearsheets').each(function() { 
    var items = $(this).children(), 
     num_items = items.length, 
     num_per_row, i, n; 

    if (num_items) { 
     items.removeClass('right bottom'); 

     // find number of items per row 
     n = 0; 
     items.each(function (i) { 
     var l = $(this).position().left; 
     if (l <= n) { 
      num_per_row = i; 
      return false; 
     } else { 
      n = l; 
     } 
     }); 

     // apply 'right' class to the last column of items 
     if (num_per_row > 1) { 
     for (i = num_per_row - 1; i < num_items; i += num_per_row) { 
      items.eq(i).addClass('right'); 
     } 
     } 

     // apply 'bottom' class to last row of items 
     n = items.eq(-1).position().top; 
     if (items.eq(0).position().top < n) { 
     $(items.get().reverse()).each(function() { 
      var item = $(this), t = item.position().top; 
      if (t == n) { 
      item.addClass('bottom'); 
      } else { 
      return false; 
      } 
     }); 
     } 
    } 
    }); 
} 

$(window).on('resize', adjust); 
adjust(); 

Answer 4

不要浪費的JavaScript。這更直接一點。

.tearsheets li:nth-of-type(even) > a:hover { 
    left:-160px; 
    } 

只需將其添加到您的CSS並完成。