2

我有一种启动画面，您可以在其中按下一个徽标，它会将徽标动画到中心，然后为其加载内容。然后，当您按下主顶部徽标时，它会隐藏内容并返回到初始屏幕。但是我遇到了这个问题。

例如，容器隐藏，然后回来。

自己寻找：http://dan.roguedraco.net/SpyroDev/ 如果您在内容完全出现之前单击顶部徽标会发生这种情况，但我想允许所有这些发生。因为用户可能会这样做。

Javascript：

$(document).ready(function() {

var inPage = false;

$('.ajax-loader').click(function() {
    if(inPage == false) {
        inPage = true;
        var Obj = this;

        $(Obj).siblings("a").fadeOut(500,function() {
            if($(Obj).hasClass('left') || $(Obj).hasClass('right')) {
                $(Obj).animate({left:'300px'},'slow','easeOutBack',function() {             
                    $('#pageContent').fadeIn(500,function() {
                        $("#tabs").tab();
                    });
                });
            }
            else {
                $('#pageContent').fadeIn(500,function() {
                    $("#tabs").tab();
                });
            }
            $(Obj).addClass('current-project');
        });
    }
});

$('#rootLogo').click(function() {
    var Obj = $('.current-project');
    if(inPage == true) {
        inPage = false;
        $('#pageContent').fadeOut(500,function() {
            $(this).hide();
            if($(Obj).hasClass('left')) {
                $(Obj).animate({left:'0px'},'slow','easeOutBack',function() {
                    $(Obj).siblings("a").fadeIn(500);
                });
            }
            else if($(Obj).hasClass('right')) {
                $(Obj).animate({left: '600px'},'slow','easeOutBack',function() {
                    $(Obj).siblings("a").fadeIn(500);
                });
            }
            else {
                $(Obj).siblings("a").fadeIn(500);
            }
            $(Obj).removeClass('current-project');
        });
    }
});

});

html:

        <div id="thumbnails">
            <div class="row-fluid">
                <div class="span12" style="text-align: center;color:#fafafa;">
                    Click a plugin title for more information and downloads.
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12" id='thumbnails'>
                    <a href="#" class="ajax-loader left" project="JumpPorts" page="Home"><img src="projects/JumpPorts/thumb.png" alt="JumpPorts" /></a>
                    <a href="#" class="ajax-loader" project="RankUpOnKills" page="Home"><img src="projects/RankUpOnKills/thumb.png" alt="RankUpOnKills" /></a>
                    <a href="#" class="ajax-loader right" project="InfoButton" page="Home"><img src="projects/InfoButton/thumb.png" alt="InfoButton" /></a>
                </div>
            </div>
        </div>

        <div id="pageContent" style="display:none;">
            <div class="row-fluid">
                ...
4

2 回答 2

1

.stop()

您是否尝试过.stop()在您的和其他动画方法之前.animate()使用.fadeIn()？像：$(Obj).stop().animate({left:

于 2012-09-16T19:51:31.037 回答
1

您是否考虑过不让徽标本身的“”成为可点击的？我的意思是，只要单击它，您就可以准备好您的事件。

试试这个：

在 .ajaxloader 事件中，在事件代码的末尾添加一个围绕它的徽标图像。

然后你切换：

$('#rootLogo').click(function() {
 var Obj = $('.current-project');
 ....
}

为了这：

$('#click-event').click(function() {  

// Assuming #click-event is the name of the span you placed

var Obj = $('.current-project');
.....
}

最后你删除在 .ajaxloader.click 事件上创建的跨度

这是一个想法，你可以使用它，告诉我它是否有效

于 2012-09-16T20:04:35.713 回答