How do they achieve animate tabs

I was wondering if anyone knew how PanelFly (panelfly.com) got the animated tabs. Is it a custom script or is it a plugin?

Thanks in advance,

Marc180

Answers


All they look like they are doing is on click they simply use fadeOut(250) and then fadeIn(250) of a div.

There are plugins for this sure, but for the fading it's just fadeIn and fadeOut.

Moving the pointer can be achieved using jQuery animate in which you can animate an item across the screen. Animate is documented here http://api.jquery.com/animate/ In fact, the second demo in the examples section does this exactly.

After that it's just a bunch of pretty pictures and css placement of div's etc.


Their JS is minified and concatenated so this isn't as readable as it could be, but it looks like they wrote a fairly simple jQuery plugin to detect if CSS3 transitions are available and animate the slider and pointer and change tabs. Pretty straightforward stuff:

$(function () {
var n = {};
n.transition = function () {
    var k = (document.body || document.documentElement).style;
    return k.transition !== void 0 || k.WebkitTransition !== void 0 || k.MozTransition !== void 0 || k.MsTransition !== void 0 || k.OTransition !== void 0
}();
$("section.tabs").each(function () {
    var k = $(this),
        O = k.find("nav li");
    O.click(function (T) {
        var u = $(this);
        if (!u.hasClass("active")) {
            O.removeClass("active");
            n.transition ? u.addClass("active") : u.animate({
                opacity: 1
            }, 300, function () {
                u.addClass("active")
            });
            var A = u.prevAll(),
                G = k.find("ul.content li");
            G.removeClass("active");
            setTimeout(function () {
                var k = $(G[A.length]);
                n.transition ? k.addClass("active") : k.animate({
                    opacity: 1
                }, 300, function () {
                    k.addClass("active")
                })
            }, 100);
            var Y = u.position();
            $(k.find(".pointer:first")).animate({
                left: Y.left
            }, 700, function () {})
        }
        T.preventDefault()
    })
})

});


Need Your Help

How to improve performance of google places autocomplete suggestions?

android performance autocomplete google-places

I am using google places autocomplete suggestions in my application. It is working fine but i want to improve its performance. When user types a place, it is giving a suggestions after a long delay...

beforeUpdate not called when only transients has changed

grails gorm

I use Grails 2.0.0.RC2 and I have an User class like this: