Question

jQuery中是否有等同于.fadeToggle()的CSS3？

我看到我的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等价物？

Answer 1

是的，您可以使用transtition，请参阅here for a jsFiddle显示实际操作

Answer 2

纯粹的CSS无法实现您正在创建的效果（单击div显示/隐藏它）。没有任何方法可以绑定像这样的点击事件（好吧，除非你在输入字段上计算:focus伪类）。

但是，如果您使用JQuery切换类（例如.active），则CSS转换将起作用。 JSFiddle here.然而，这实际上并不是处理淡入淡出的好方法，因为JQuery在幕后做了很多工作来处理不同的浏览器及其opacity的具体实现。但是，如果你正在做一些改变div的宽度的事情，那就太棒了，因为它可以让你把所有样式都保存在CSS和Javascript中包含的逻辑中。

Answer 3

您可以在没有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它再次出现......

fadeToggle（）到CSS3效果？

3 个答案: