jquery为div设置动画,当完成时,在第一个div中设置第二个div

时间:2012-03-19 16:39:01

标签: jquery html jquery-animate

我在网上有一个标题(140px高度),内容为5“li”。这个(A,B,C)的前3个在“.mouseover”时打开一个副标题(50px高度),其他2个(D,E)在开始时全部关闭。

jq(document).ready(function(){
        jq("#A a,#B a,#C a").mouseover(function(){
            jq("#subheader").animate({top:"140px"},"normal");
        });

        jq("#D a,#E a").mouseover(function(){
            jq("#subheader").animate({top:"91px"},"normal");
        });
    });

直到这里一切都好,现在出现了问题。依赖于A,B或C悬停必须与子标题做不同的事情,就在动画结束时。 (在副标题内打开.smenus)

        jq("#A a").mouseover(function(){
            jq(".smenu1").slideDown("slow");
            jq(".smenu1 ul").animate({margin:"0px auto"},"slow");
            jq(".smenu1 li").animate({padding:"0 30px 0"},"slow");

        });
        jq("#B a").mouseover(function(){
            jq(".smenu2").slideDown("slow");
            jq(".smenu2 ul").animate({margin:"0px auto"},"slow");
            jq(".smenu2 li").animate({padding:"0 30px 0"},"slow");

        });
        jq("#C a").mouseover(function(){
            jq(".smenu3").slideDown("slow");
            jq(".smenu3 ul").animate({margin:"0px auto"},"slow");
            jq(".smenu3 li").animate({padding:"0 30px 0"},"slow");

        });

我认为这不起作用,因为它在完成suheader打开之前开始加载。所以当开场结束时我必须做这个动画。

PD:现在另一件事,例如#A徘徊,然后#B,它必须停止动画(如果没有完成,或只是回调),删除其他子菜单(在这种情况下.smenu1)并将其替换为他们的子菜单(在本例中为.smenu2)。 #D和#E必须做同样的事情,把所有东西都重新开始。

编辑:

感谢Simon,我或多或少有这个:http://jsfiddle.net/PAXqB/4/

最后一个实现是使用.click()而不是.mouseover()使用这3个案例:

  • 案例1:与鼠标悬停相同,全部打开。
  • 案例2:再次点击相同的Main,所有必须像我的例子一样关闭。
  • 案例3:点击其他Main,关闭子菜单,而不是suheader,然后打开新的子菜单。

4 个答案:

答案 0 :(得分:0)

你有几个选择

.animate()有一个完整的回调选项:

jq(".smenu2 ul").animate({margin:"0px auto"},"slow", function() {
   // code here is executed after this animation is complete
});

使用.queue(),例如:

jq(".smenu2").slideDown("slow");     
jq(".smenu2").queue(function () {
  jq(".smenu2 ul").animate({margin:"0px auto"},"slow");
  jq(this).dequeue();
});
jq(".smenu2 li").animate({padding:"0 30px 0"},"slow");

这个简单的排队动画请求并按顺序执行

答案 1 :(得分:0)

首先,我建议整理代码以提高可读性并使其更易于使用。例如:

$("#A a, #B a, #C a").on('mouseover', function(){
            $menu = $(this).find(".menu");
            $menu.slideDown("slow");
            $menu.find("ul").animate({margin:"0px auto"},"slow");
            $menu.find("li").animate({padding:"0 30px 0"},"slow");
        }).on('mouseout', function(){
            $(this).find(".menu").stop(true, true);
});

未经过全面测试,但在使代码正常工作方面,这应该是正确的 - 作为答案的第二部分.stop()方法。

答案 2 :(得分:0)

我必须说我必须多次阅读你的问题而且我还不确定我是否理解你,但这是你想要达到的目标吗? http://jsfiddle.net/PAXqB/

$(document).ready( function() {
    $('ul.main > li').bind('mouseover mouseout', function(e) {
        var t = $(this), i = t.index(), sub = t.find('.sub');
        if(i < 3)
            switch(e.type) {
                case 'mouseover':
                    sub.stop(true).slideDown( function() {
                        $(this)
                            .stop(true)
                            .animate({ margin:"20px 0 0" })
                            .find('li')
                            .stop(true)
                            .animate({ padding:"0 10px 0" });
                    });
                    break;
                case 'mouseout':
                    sub.stop(true).slideUp('fast', function() {
                        $(this)
                            .removeAttr('style')
                            .find('li')
                            .removeAttr('style');
                    });
                    break;
            }
    });
});

我略微调整了animate-to风格,所以它在我的jsfiddle上看起来更平滑,但我希望它可以帮助你。

答案 3 :(得分:0)

所以对于平板电脑来说,这将是我最好的解决方案:jsfiddle 我正在开发一个版本,它可以完全按照您的意愿行事(如果没有任何内容可见,容器只会向下/向上滑动或点击的项目处于活动状态),但动画atm会出现问题。

$(document).ready( function() {

    var active = 'active';

    $('ul.main > li').bind('click', function() {

        var t = $(this),
            i = t.index(),
            c = $('.sub-container'),
            sub = $( $('.sub').get(i) ),
            isActive = t.hasClass(active),
            li = sub.find('li'),
            liCount = li.length;

        c.slideUp('fast', function() {
            c.find('*').removeAttr('style');
            t.siblings().removeClass(active);
            if(i < 3) {
                if(isActive) t.removeClass(active);
                else {
                    t.addClass(active);
                    c.slideDown( function() {
                        sub.slideDown( function() {
                            li.animate({
                                width: (100 / liCount) + '%'
                            });
                        });
                    });
                }
            }
        });

    });

});