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的效果？

回答

相关问题