翻轉與轉換延遲divs？

我想添加一個轉換延遲到我翻轉懸停divs，從閱讀我明白，「display:none」不能有一個轉換延遲這是什麼阻止我，它需要做另一種方式。翻轉與轉換延遲divs？

我嘗試過使用z-index沒有成功，也使用了可見性，但這會導致出現不同的問題，因爲我將顯示不同的文本和圖像作爲默認和懸停顯示，並且可見性功能正在影響間距，因爲我相信它們仍佔據空間但不顯示。

這是我到目前爲止有：

http://jsfiddle.net/hfs323h7/

是否有人或知道的方式，使其過渡與轉換延遲，同時徹底改變顯示的DIV？要麼與純CSS，jQuery或javascipt？

謝謝！

來源

2017-08-30 Beth

你不能只是使用jQuery的內置褪色？ –

您可以通過CSS不透明度做到這一點。

.parentItem{ height:200px; background-color:#e7e7e7; float:left; margin-left:1px;width:33%;} 
 

 

 
.hoveredItem{opacity:0;transition:opacity 1s;position:absolute;} 
 
.itemDisplay{opacity:1;transition:opacity 1s;position:absolute;} 
 
.parentItem:hover .hoveredItem {opacity:1; } 
 
.parentItem:hover .itemDisplay{opacity:0;}

<div class="clearfix"></div> 
 
<div class="parentItem"> 
 
<div class="itemDisplay">ok</div> 
 
<div class="hoveredItem">hai</div> 
 
</div> 
 

 
<div class="parentItem"> 
 
<div class="itemDisplay">ok</div> 
 
<div class="hoveredItem">hai</div> 
 
</div> 
 

 
<div class="parentItem"> 
 
<div class="itemDisplay">ok</div> 
 
<div class="hoveredItem">hai</div> 
 
</div>

來源

2017-08-30 00:52:32 AkeRyuu

非常感謝，有沒有淡入淡出的過渡方式，讓它在懸停後發生第二次延遲而不是褪色變化？ – Beth

如果我理解正確，就像 '.hoveredItem {opacity：0; transition：opacity 0s 1s; position：absolute;} .itemDisplay {opacity：1; transition：opacity 0s 1s; position：absolute;}' 第一個數字是過渡時間，秒數延遲 – AkeRyuu

可以實現使用jQuery衰落懸停效果，

$(document).ready(function() { 
    $(".parentItem").on("mouseover", function() { 
    $(this).find('.itemDisplay').hide(); 
    $(this).find('.hoveredItem').fadeIn(); 
    }); 
});

如果一個項目盤旋，然後消失在新項目這基本上是檢查。

這是你的情況的小提琴。 JSFiddle

然後，您可以ofcourse也檢查mouseOut事件，

$(".parentItem").on("mouseout", function() { 
    $(this).find('.hoveredItem').hide(); 
    $(this).find('.itemDisplay').fadeIn(); 
    });

來源

2017-08-30 00:40:26

翻轉與轉換延遲divs？

回答

相關問題