Question

确定函数的第一件事 -

//function to change page   
function changePage(newPage) {
    $('.current').slideUp();
    $('.current').removeClass('current');
    $(newPage).addClass('current');
    $('h3.title').text('');
    $('.slider_container').empty();
    $(newPage).slideDown();
}

如何调用

$('.specialistLink').on('click', function(event) {
    event.preventDefault();
    $('#footerLinks').removeClass('hide');
    $('header').css({'border-bottom': '10px solid #738c1f'});
    changePage("#page3");
    $('h3.title').text('dp-specialist').css({'color' : '#738c1f'}); 
    $('#page3 .left ul a:first').click();
    $('#footerLinks .left').css({'background-color':'#738c1f'});
    $('#footerLinks .right').css({'background-color':'#c8c0b5'});
});

上述点击事件的Dom元素

<a href="#" class="specialistLink">
<div class="left">
  <h3>dp-specialist ></h3>
</div>
</a>

显示/动画的dom元素（减去空间原因的内容）

<section id="page3" class="hide">
</section>

现在问题 - 我有2个这样的链接是相同的（除了#page加载，css值要更改以及触发点击的类），但是这个从未动画 - 它显示得很好（内容更改）和＃page3显示）但是当前的#page没有向上滑动，新的#page没有滑入，除非＃page3当前已经在视图中，它会滑入。

Answer 1

也许使用slideUp的回调函数可以解决您的问题（但不确定）：

function changePage(newPage) {
    $('.current').slideUp('slow',function() {
        $('.current').removeClass('current');
        $(newPage).addClass('current');
        $('h3.title').text('');
        $('.slider_container').empty();
        $(newPage).slideDown();
    });

}

一旦slideUp动画完成，这将执行第二个函数内的所有内容

Answer 2

查看动画完成后添加当前类是否有用。

//$(newPage).addClass('current');
$('h3.title').text('');
$('.slider_container').empty();
$(newPage).slideDown(400, function(){ $(this).addClass("current"); } );

使用.slideUp的函数不动画

2 个答案: