fadeToggle（）以CSS3的效果？

在jQuery中是否有相當於.fadeToggle()的CSS3？fadeToggle（）以CSS3的效果？

我周圍的Googling看到我的JQ代碼並沒有在移動設備上運行流暢後，想改變我現有的代碼到CSS3動畫（它的一部分）。

在我的代碼下面，它調用.fadeToggle()向底部。我讀到一篇文章，說有可能通過jQuery調用CSS3效果：http://awardwinningfjords.com/2011/05/06/trigger-css3-animations-with-jquery.html

$(function() { 
    function a(a) { 
     a.each(function() { 
      var b, c; 
      a = $(this); 
      b = a.find("a.toggle"); 
      c = a.find("div"); 
      b.click(function (a) { 
       a.preventDefault(); 
       c.stop(false, true).slideToggle(300); 
      }); 
     }); 
    } 
    a($("div.container")); 
}); 
$(document).ready(function() { 
    $(".toggle_overlay").click(function() { 
     $(".widget_overlay").fadeToggle(); 
    }); 
});

是否有CSS3相同呢？

來源

2011-11-20 Charlie

的影響要創建它（點擊div顯示/隱藏它）是不可能的純CSS。沒有任何方法可以像這樣綁定點擊事件（當然，除非您在輸入字段上計數:focus僞類）。

然而，如果你使用jQuery來切換類（.active，例如）CSS的轉變將發揮作用。 JSFiddle here.但是，這實際上並不是一種處理淡入淡出的好方法，因爲JQuery在幕後處理不同的瀏覽器及其特定的實現opacity做了很多工作。但是，如果您正在改變div的寬度，這很棒，因爲它可以讓您將所有樣式保留在CSS中，並且包含到Javascript中的邏輯。

來源

2011-11-20 15:29:43

是的，你可以使用一個transtition，看到here for a jsFiddle顯示在行動

來源

2011-11-20 14:59:54

該選項要求您使用僞類來觸發動畫。雖然通過點擊沒有辦法做到這一點。 – Charlie

你問了一個CSS3相當於fadeToggle，而不是點擊然後fadeToggle ......沒有CSS等效的點擊，該事件將不得不由javascript來處理。僅供參考已更新小提琴更接近fadeToggle。 –

你可以嘗試看看這兩個作品的組合：http://jsfiddle.net/L4HSR/3/ – jeffreydev

您可以在沒有JavaScript的情況下模擬點擊。只要將僞類從懸停改爲焦點即可。您需要添加一個tabindex，以便該元素可以保持焦點。

<div id="cf"> 
    <img class="bottom" tabindex="2" src="http://www.w3schools.com/css/klematis.jpg" /> 
    </div>

然後你只需使用：焦點，因爲它需要一個點擊或點擊：

#cf img:focus { 
    opacity:0; 
    }

這裏是我的（改變）小提琴：http://jsfiddle.net/Lc84p3cw/ 當然它倒過來，你點擊它，它淡出，onblur它重新出現...

來源

2015-02-06 07:12:19 GPJ

fadeToggle（）以CSS3的效果？

回答

相關問題