디스플레이 셀을 none으로 전환하려면 어떻게해야합니까?

Question

아래에 하프 작업 스크립트가 있습니다. 유일한 문제는 마우스를 가져 가면 부모 요소가 사라지는 것입니다. 나는 또한 페이드 인/아웃 작업을 얻을 수 없습니다.

아이디어가 있으십니까?

HTML

<div class="group mt10"> 
    <div class='col2 pull-left homeTile' style="margin-right:10px;"> 
     <a class='homeHover' title="Weddings" href='#' style="background-image:url(../img/wedding-cake.jpg);"> 
      <span>Weddings</span> 
     </a> 
    </div> 
    <div class='col2 pull-left homeTile'> 
     <a class='homeHover' title="Weddings" href='#' style="background-image:url(../img/wedding-cake.jpg);"> 
      <span>Weddings</span> 
     </a> 
    </div> 
</div> 

JS 난 당신이 내가 그것을 해결할 수 없습니다 게시 된 코드에서 페이드 인/아웃이 표시되지 않습니다

<script> 

$(document).ready(function() { 

    $('.homeHover').css("display", "table");  

    $('.homeHover').hover(function() { 

     $(this).find('span').stop().toggle().css("display", "table-cell"); 
    }, 
    function(){ 

     $(this).find('span').stop().toggle().css("display", "none"); 
    });  
    });   
</script> 

Answer 1

.

감안할 때 코드에서 일을 할 당신이 게시 요소를 숨 깁니다 visibility를 사용하지만 요소가 여전히 문서에 공간을 차지 이러한 기능이되어있는 것을 명확하지 때문에 당신이 게시물을 무슨 짓을했는지, .stop() 및 .toggle()을 걸릴 것 레이아웃 : 당신이 완전히 문서 레이아웃에서 요소를 제거 display을 고수 할 경우

$('.homeHover').hover(
    function() { 
     $(this).find('span').css("visibility", "visible"); 
    }, 
    function() { 
     $(this).find('span').css("visibility", "hidden"); 
    } 
); 

Visibility Fiddle

, 당신은 그래서 일부 치수 a 요소를 제공해야 a 요소가 완전히 사라지지 않습니다 (당신은 아무것도 표시되지 않도록 기술적으로 a은 아직 거기, 그냥 지금에 무관) :

$('.homeHover').hover(
    function() { 
     $(this).find('span').css("display", "table"); 
    }, 
    function() { 
     $(this).find('span').css("display", "none"); 
    } 
); 

(단지 예로서 100px을 사용) :

.homeHover { 
    width: 100px; 
    height: 100px; 
} 

Display Fiddle