javascript - 菜单项 - onclick FadeInDown 和 FadeOutUp

Question

• 我有一个由三个选项组成的菜单。
• 点击其中一个会使容器 div 变为“FadeInDown”。
• 然后，其内容“淡入”。
• 点击另一个菜单项或页面上的其他任何地方会导致内容到“FadeOut”，然后容器 div 到“FadeOutUp”。

这是我一直在测试的 fiddle jsfiddle

$(document).ready(function() {
    $('.container').each(function() {
        animationHover(this,'.fadeInDown');
    });
});

我对 jQuery 不是很熟悉，一直在尝试使用 animate-css 来帮助我。感谢您提前提供任何帮助和提示，并欢迎编码批评:)

Answer 1

我的回答主要基于 JQuery 及其 animate 函数 (http://api.jquery.com/animate/)。这是 fiddle : http://jsfiddle.net/awmat/7/

我使用 fadeInDown 等 JavaScript 对象来为容器设置动画。

var fadeInDown = {
    opacity:1,
    top: "50px"
};

并且我使用animate的complete回调函数让内容出现在容器之后。

为了管理多个 div(每个菜单项一个)，我使用 id 作为选择器，但是由于“点击和显示”功能保持不变，我使用了一个“构建器”:(这使用了一个闭包，所以如果你不熟悉JavaScript的，可能要多看几遍才能明白是怎么回事)

var menuClickCallbackBuilder = function(menuItem){
    var container = $('#container' + menuItem);
    var content = container.find('.content');

    var showContent = function(){
        content.animate({opacity:1},{duration:1000});
    };

    return function() {
        var activeContainer = $('.active');
        var hideContainer = function(){
           activeContainer.animate(fadeOutUp,1000);
        };
        activeContainer.find('.content').animate({opacity:0},{duration: 1000, complete : hideContainer});
        activeContainer.removeClass("active");

        if(activeContainer[0] != container[0])
        {
            var timeout = activeContainer[0] ? 2000 : 0 ;
            setTimeout(function(){
                 container.animate(fadeInDown,{duration : 1000, complete :showContent});
            },timeout);  

            container.addClass("active");
        } 
    }
};

这样，当您添加点击回调时，您可以这样做:

$(document).ready(function(){
    // note that menuClickCallbackBuilder(1) returns a function
    // again if you're not familiar with JS, you may have to re-read menuClickCallbackBuilder
    $('#menuLink1').on('click', menuClickCallbackBuilder(1)); 
    $('#menuLink2').on('click', menuClickCallbackBuilder(2));
    $('#menuLink3').on('click', menuClickCallbackBuilder(3));
});

您可以为此带来一些改进:

• 将持续时间分解为一个变量(例如 animationDurationInSeconds)，这样如果您想更改动画的速度，您只需更改一件事。 (@Huangism:在你这样做之后，让动画更快，让它变得更有活力)

• (来自@Huangism):当人们快速点击菜单 10 次时阻止它变得疯狂

• 实际上，我认为你不需要 3 个不同的容器，你可以只用一个容器(虽然我不知道这是否会被认为是一种改进)

• 可能有一种方法可以使用 CSS 类代替 fadeInDown 和 fadeOutUp JS 对象。那会更干净，我认为您应该尽可能多地在 CSS 中保留样式。

• 不需要为菜单项设置不同的 ID，您可以使用循环执行完全相同的操作。

• 想添加什么都行