在css中jQuery fadein淡出效果

我正在使用Cordova製作應用程序，它使用jQuery效果，即淡入淡出和淡入淡出。這個效果在我的android設備上非常慢。我想將它們轉換爲CSS的，我看到的方式來做到這一點使用toggleClass等在css中jQuery fadein淡出效果

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script> 
     $(document).ready(function($) { 
      $("#fade").click(function() { 
       $('#fader').toggleClass('fadeout'); 
      }); 
      $('#fader').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
       $('#fader').toggleClass('hide'); 
      }); 
      setTimeout(500) 
     }); 
    </script> 
    <style> 
     div{ 
      background-color: blue; 
     } 
     #fader{ 
      display: block; 
      opacity: 1; 
      -webkit-transition: opacity 0.35s linear; 
      -moz-transition: opacity 0.35s linear; 
      -ms-transition: opacity 0.35s linear; 
      -o-transition: opacity 0.35s linear; 
      transition: opacity 0.35s linear; 
     } 
     #fader.fadeout{ 
      opacity: 0; 
     } 
     #fader.fadeout.hide{ 
      display: none; 
     } 
    </style> 
</head> 
<body> 
    <div id="fader"> 
     css 
    </div> 
    <br> 
    <br> 
    <div id="fade"> 
     DivButton 
    </div> 
</body> 
</html>

但我遇到兩個問題：

1期

雖然使用jQuery淡入，它到底將顯示設置爲無。同樣，在使用淡出時，它將刪除display：none屬性。動畫也是突然的。我怎麼能在CSS中做到這一點？

第2期

我想用延時功能，在CSS的淡入淡出，並沿。我怎樣才能做到這一點？

請幫幫忙。

在此先感謝。

來源

2015-09-20 TheLinuxEvangelist

將是很好，如果你能提供的代碼或的jsfiddle例子。不管怎麼樣，你也許可以使用類切換使用'opacity'來淡化元素，並且您可以在css'transition'屬性中設置延遲和過渡時間。至於'display：none'，它不能是「動畫」，讓它可以給出奇怪的結果，嘗試玩'visibility：none' – Aziz

我已經看到使用toggleClass的那些例子。但是沒有可見性。還有..我不知道如何玩可見度 – TheLinuxEvangelist

好的，請分享代碼或演示，以便我們可以更好看 – Aziz

display:none;將突然刪除該塊，因此您可能還要爲高度設置動畫。

下面是CSS變化的一個例子：

$(function() { 
 
    $(".toggle-fade").click(function() { 
 
     $(".block").toggleClass('hidden'); 
 
    }); 
 
});

.block { 
 
    background:red; 
 
    height:300px; 
 
    width:300px; 
 
    visibility:visible; 
 
    opacity:1; 
 
    transition:2s; 
 
    -webkit-transition:2s; 
 
    transition-delay:1s; 
 
    -webkit-transition-delay:1s; 
 
} 
 
.block.hidden { 
 
    visibility:hidden; 
 
    height:0px; 
 
    opacity:0; 
 
    overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="block"> 
 
    
 
</div> 
 
<button class="toggle-fade">Toggle block</button>

Fiddle version

來源

2015-09-20 14:07:47

哇！很酷..謝謝..但我可以使用延遲（）隨着它.. – TheLinuxEvangelist

@Johann是的，你可以。不過，我也爲CSS本身添加了延遲。你什麼時候想要延遲發生？你可以在這裏添加它：'$（「。block」）。delay（1000）.toggleClass（'hidden'）' –

在css中jQuery fadein淡出效果

回答

相關問題