Question

Is there a CSS3 equivalent to .fadeToggle() in jQuery?

I was googling around after seeing that my jq code didn’t run the smoothest on mobile devices, and wanted to transform my already existing code into CSS3 animations (parts of it).

In my code below, it calls .fadeToggle() towards the bottom. I read an article saying it was possible to call CSS3 effects via jQuery: 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();
    });
});

Is there a CSS3 equivalent?

Answer 1

The effect you are creating (clicking a div shows/hides it) isn’t possible with purely CSS. There isn’t any way to bind click events like that (well, unless you count the :focus pseudo class on input fields).

However, the CSS transition would function if you used JQuery to toggle a class (.active, for example). JSFiddle here. However, this is actually not such a good way to handle fading in and out, since JQuery does a lot of work behind the scenes to handle different browsers and their specific implementations of opacity. But, if you were doing something like changing the width of a div, it’s great, because it lets you keep all your styling in the CSS and the logic contained to the Javascript.