0

编辑:新问题是即使 current_slide.showCurrentSlide(); 函数在 hidePrevSlide 函数内部,showCurrentSLide 代码在 hidePrevSlide 中的动画完成之前执行。

我正在尝试创建一个网站,如果您单击 < li >,则 < li > 将添加一个类。然后它将当前可见屏幕向上滑动并隐藏,然后显示与 <li> 对应的屏幕(例如,如果 <li> 为'home',则它将当前存在的屏幕向上滑动并隐藏它,然后它应该是“#homeSlide”屏幕)。这是我的代码。

$(document).ready(function(){

    hideItems(); //this function basically hides all the screens / slides.. The words 'screen' and 'slides' are interchangeable for the time being.

    $('#homeSlide').fadeIn(1000); //the default screen to be shown is the home screen
    $('#homeSlide').addClass('current'); //to signify that this is the current visible screen
    $('#home').addClass('clicked'); //#home is the <li>, so it adds the .clicked class to the <li>

    $('#sidebar ul a li').click(function(){ //loops through all <li>'s in the sidebar if an <li> is clicked
        var current_slide = $(this);
        $('#sidebar ul .clicked').removeClass('clicked'); // when an <li> is clicked, remove .clicked class from any other <li>'s
        current_slide.addClass('clicked'); // add .clicked class to the clicked <li> ($(this))

        hidePrevSlide(function(){
            alert('enter showing step');
            current_slide.showCurrentSlide();
        });
    });
});

这是我的 hidePrevSlide 函数。

function hidePrevSlide(){
    var test = $('.current').attr('id'); 
    test = "#" + test; // surrounds the id with a # and the word 'Slide'. This is the id of the screen which should slideUp
    $(test).slideUp( function () {
        $(test).hide();
        $(test).removeClass('current');
    });
alert('finished hiding step. Should enter showing step now');
};

现在,当我运行代码时,它确实说“完成隐藏步骤。现在应该进入显示步骤”,但它没有说“进入显示步骤”,因此它没有进入应该在 hidePrevSlide 功能完成后执行的步骤。怎么来的?

4

1 回答 1

2

hidePrevSlide需要调用回调函数。

function hidePrevSlide(callback){
    var test = $('.current');
    test.slideUp( function () {
        test.hide();
        test.removeClass('current');
    });
    alert('finished hiding step. Should enter showing step now');
    callback();
};

我还删除了$(test). 如果您有一个元素,则无需继续按 ID 搜索它。

于 2013-10-13T21:15:08.860 回答