Question

我使用以下JQuery代码打开一对开始关闭的门。不同的菜单项会导致门关闭，然后重新打开，下面会显示相应的图片。一切顺利，除了第一次打开门，右门div快速回到最初的位置并再次动画。我在这做错了什么？请看#leftdoor和#rightdoor这些是我遇到问题的div。

    var doorOpen = false;

        $("a[href=#bugz]").click(function() {

            // If door is open then close doors
            if (doorOpen) { 
                var duration = 1000;
            } else {
                var duration = 0;
            }

            $('.title1,.title2,.title3,.title4,.title5,.fade1,.fade2,.fade3,.fade4,.fade5,').animate({
            opacity: 0,
            }, 1000);
            $('.fade5,.fade2,.fade3,.fade4').css('zIndex', 1);
            $('.fade1').css('zIndex', 20);

            $("#rightdoor,#leftdoor").animate(
                {"marginLeft":"0px"},
                {duration:duration,
                    complete:function() {
                        $('.pic2,.pic3,.pic4,.pic5').css('zIndex', 1);  //puts wrong pics in back
                        $('.pic1').css('zIndex', 2);  //brings right pic into view
                        $('#rightdoor').animate({  //opens doors again
                         marginLeft: "150px",
                        }, 1000);
                        $('#leftdoor').animate({
                         marginLeft: "-150px",
                        }, 1000);
                        $('.title1').animate({
                        "opacity": "0.75",
                        }, 1000);
                        $('.fade1').animate({
                        "opacity": "1",
                        }, 1000);
                    }
                }
            );

            doorOpen = true;


        });

每次再次运行时，它都能正常工作。这是门开始关闭时第一次出现问题

Answer 1

试

doorOpen = true;
return false;

//instead of 
doorOpen = true;

如果不起作用

试

$("a[href=#bugz]").click(function(e) {
  e.stopPropagation()

JQuery Animate中的回调

1 个答案: