用CSS3淡出/淡入效果

我想用CSS3動畫創建淡出/淡出效果。這裏是我的CSS：用CSS3淡出/淡入效果

#buttonright, #buttonleft{ 
-webkit-transition:opacity 0.5s linear; 
-moz-transition:opacity 0.5s linear; 
-o-transition:opacity 0.5s linear; 
-ms-transition:opacity 0.5s linear; 
transition:opacity 0.5s linear; 
}

和JavaScript（我使用jQuery）：

$('#buttonleft').css("opacity","0"); 
$('#buttonright').css("opacity","0"); 
$('#buttonleft').css("opacity","1"); 
$('#buttonright').css("opacity","1");

它看起來像瀏覽器認爲這是愚蠢的，設置不透明度爲0，然後將其設置回1.有人有可能的解決方案嗎？

謝謝。

來源

2012-01-26 Kevin

只是好奇......爲什麼不用JQuery本身來處理它呢？您可以使用JQuery提供的fadeIn（）和fadeOut（）函數。 –

我之前使用過jquery，但由於我認爲GPU加速，CSS3動畫具有更好的性能。這是針對只爲Firefox設計的Web應用程序，因此使用CSS3不會造成問題。 – Kevin

編輯：關於yaki的純CSS3解決方案的答案。

您沒有給瀏覽器足夠的時間來完成轉換。如果您在後面的語句中添加setTimeout，它應該可以工作。

事情是這樣的：

$('#buttonleft').css("opacity","0"); 
$('#buttonright').css("opacity","0"); 
setTimeout(function(){$('#buttonleft').css("opacity","1");}, 5000); 
setTimeout(function(){$('#buttonright').css("opacity","1");}, 5000);

來源

2012-01-26 14:02:41

非常感謝！它解決了這個問題。 – Kevin

這樣的事情？

$('#button').hover(
    function() { 
     $(this).animate({opacity: 0}, 500); 
    }, 
    function() { 
     $(this).animate({opacity: 1}, 500); 
    } 
);

來源

2012-01-26 14:06:07 Deadlykipper

實際上接受的解決方案不是CSS3解決方案（它仍然需要一些JavaScript代碼）。請檢查下面的代碼。

HTML：

<a id='buttonleft'>Button left</a> 
<a id='buttonright'>Button right</a>

CSS：

#buttonleft, #buttonright { 
    text-align: left; 
    background: rgb(180,180,255); 
    opacity:0.5; 

    /* property duration timing-function delay */ 
    -webkit-transition: opacity 500ms linear 100ms; 
    -moz-transition: opacity 500ms linear 100ms; 
    -o-transition: opacity 500ms linear 100ms; 
    transition: opacity 500ms linear 100ms; 
    } 

#buttonleft:hover, #buttonright:hover { 
    opacity: 1.0; 
}

來源

2012-01-26 14:27:04

非常好，我不知道轉換的第四個參數。 –

第四個參數用於延遲，此示例僅淡入。https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions – Aligned

您可以使用CSS3 animations現在，它被超過時，你問原來的問題的支持。我創建了一個jsFiddle showing how to do this on hover。

@keyframes demo { 
    from { 
     animation-timing-function: ease; 
     opacity: 1; 
    } 
    50% { 
     animation-timing-function: ease-in; 
     opacity: 0; 
    } 
    to { 
     animation-timing-function: ease-inout; 
     opacity: 1; 
    } 
} 

img:hover 
{ 
    animation-delay: 0s; 
    animation-duration: 2s; 
    animation-iteration-count: 1; 
    animation-name: demo; 
}

來源

2015-06-22 14:43:55 Aligned

用CSS3淡出/淡入效果

回答

相關問題