編集:新しい問題は、 current_slide.showCurrentSlide(); であっても 関数が hidePrevSlide 関数内にある場合、showCurrentSLide コードは、hidePrevSlide のアニメーションが終了する前に実行されます。
< li > をクリックすると < li > にクラスが追加される Web サイトを作成しようとしています。次に、現在表示されている画面を上にスライドして非表示にし、< 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関数が実行された後に実行する必要があるステップには入りません。どうして?