在我的開關窗體jquery腳本中遇到問題

我正在使用切換窗體localstorage製作單頁Web應用程序。在我的開關窗體jquery腳本中遇到問題

我的問題是我有一個動畫圖片使用animation.css插件在每一個需要幾秒鐘完成的形式。如果我切換表單的速度足夠快，以至於表單上的動畫還沒有結束，它就會返回到最後一個結束動畫的形式並轉到我單擊的最後一個表單。

我想要做的是我可以切換表格，即使該表格上的動畫還沒有結束。

例如HTML代碼：

<a href="javascript:void(0)" class="show-page" data-page="one">ONE</a><br/><br/> 
<a href="javascript:void(0)" class="show-page" data-page="two">TWO</a> 

<div class="page one hide"> 
    <div class="row"> 
     <center> <h1>ONE</h1> </center> 
    </div> 
</div> 
<div class="page two hide"> 
    <div class="row"> 
     <center> <h1>TWO</h1> </center> 
    </div> 
</div>

我的腳本代碼：

if (typeof (Storage) !== "undefined" && localStorage.getItem('pageToShow')) { 
    var pageToShow = localStorage.getItem('pageToShow'); 
    $('.page').addClass('hide'); 
    $('.' + pageToShow).removeClass('hide'); 
} 
$('.show-page').click(function (e) { 
    e.preventDefault(); 
    var pageToShow = $(this).data('page'); 

    $('.page').addClass('hide'); 
    $('.' + pageToShow).removeClass('hide'); 
    if (typeof (Storage) !== "undefined") { 
     localStorage.setItem('pageToShow', pageToShow); 
    } 

});

來源

2014-08-28 user3934676

提示：喜歡動畫FX一會兒用戶，那麼它只是原來是消耗無用的東西的時間。 – melancia 2014-08-28 09:58:45

而不是使用animation.css類hide，取消隱藏的div，考慮到這jQuery的唯一的解決辦法的：

腳本：

if (typeof (Storage) !== "undefined" && localStorage.getItem('pageToShow')) { 
    var pageToShow = localStorage.getItem('pageToShow'); 
    $('.page').css("display", "none"); 
    $('.' + pageToShow).css("display", "block"); 
} 
$('.show-page').click(function (e) { 
    // e.preventDefault(); 
    var pageToShow = $(this).data('page'); 

    $('.page:not(.'+pageToShow+')').fadeOut(200, function(){ 
     $('.' + pageToShow).fadeIn(200); 
    }); 

    if (typeof (Storage) !== "undefined") { 
     localStorage.setItem('pageToShow', pageToShow); 
    } 

});

Working Demo

來源

2014-08-28 10:22:33

在我的開關窗體jquery腳本中遇到問題

回答

相關問題