Question

我正在使用切换格式localstorage创建单页Web应用程序。

我的问题是我有一个动画图片，每个表单都使用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);
    }

});

Answer 1

考虑到这个仅限jQuery的解决方案，取消使用animation.css类到hide，取消隐藏div：

<强>脚本：

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

我的交换机中的问题形成了jquery脚本

1 个答案: