Question

我有一个由三个选项组成的菜单。
点击一个会导致容器div变为“FadeInDown”。
然后，其内容为“FadeIn”。
点击另一个菜单项或页面上的任何其他位置会导致将内容添加到“FadeOut”，然后将容器div添加到“FadeOutUp”。

这是我一直在测试的小提琴jsfiddle

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

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

Answer 1

我的回答主要基于JQuery及其animate函数（http://api.jquery.com/animate/）。这是小提琴： http://jsfiddle.net/awmat/7/

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

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

我使用complete的{{1}}回调函数将内容显示在容器之后。

为了管理几个div（每个菜单项一个），我使用id作为选择器，但由于“click and display”功能保持不变，我使用了“builder”:(这使用了一个闭包，所以如果你“我不熟悉JavaScript，您可能需要多次阅读以了解正在发生的事情”

animate

这样，当你添加添加点击回调时，你可以这样做：

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)); });），这样如果您想要更改动画的速度，您只需更改一件事。（@Huangism：就在你这样做之后，让动画变得更快，以便它变得更有活力）
（来自@Huangism）：当人们在菜单上快速舔10次时，阻止它变得疯狂
实际上，我认为你不需要3个不同的容器，你可以只用一个容器来做（虽然我不知道它是否会被认为是一种改进）
可能有一种方法可以使用CSS类而不是animationDurationInSeconds和fadeInDown JS对象。那会更干净，我认为你应该尽可能多地保留CSS中的样式。
菜单项不需要不同的ID，你可以用循环做同样的事情。
无论您的想象力想添加什么

菜单项 - onclick FadeInDown和FadeOutUp

1 个答案: