2

ある種のスプラッシュ画面があります。ロゴの1つを押すと、ロゴが中央にアニメーション化され、そのコンテンツが読み込まれます。次に、メインのトップロゴを押すと、コンテンツが非表示になり、スプラッシュ画面に戻ります。しかし、私はこれに問題があります。

コンテナが隠れてから戻ってくるなど。

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

ロゴ自体の「」をクリック可能にしないことを検討しましたか？つまり、クリックされるたびにイベントの準備ができているということです。

これを試して：

.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 に答える
1

.stop()

andおよび他のアニメーションメソッドの.stop()前に使用しようとしましたか? お気に入り：.animate().fadeIn()$(Obj).stop().animate({left:

于 2012-09-16T19:51:31.037 に答える