Question

我想知道是否有人知道PanelFly（panelfly.com）如何获得动画标签。它是自定义脚本还是插件？

提前致谢，

Marc180

Answer 1

所有他们看起来都在点击他们只是使用fadeOut（250）然后fadeIn（250）div。

有确定的插件，但对于褪色，它只是fadeIn和fadeOut。

使用jQuery动画可以实现移动指针，您可以在其中为屏幕上的项目设置动画。 Animate在此处记录http://api.jquery.com/animate/实际上，示例部分中的第二个演示完全是这样做的。

之后，它只是一堆漂亮的图片和div的css放置等。

Answer 2

他们的JS被缩小并连接，所以这不是可读的，但看起来他们编写了一个相当简单的jQuery插件来检测CSS3过渡是否可用并为滑块和指针设置动画并更改标签。非常简单的东西：

$(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()
    })
})

}）;

他们如何实现动画标签

2 个答案: