Question

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

如容器隐藏，然后回来。

自己找：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">
                ...

Answer 1

.stop()

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

Answer 2

您是否考虑过不使徽标本身的“”“可点击？我的意思是，只要点击它，你就可以准备好你的活动。

试试这个：

如果.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事件

上创建的范围

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

jquery动画随机发生

2 个答案: