1

好的，首先是功能-

//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 当前已经在视图中，在这种情况下它会滑入。

4

2 回答 2

1

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

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

}

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

于 2013-06-10T14:16:55.923 回答
0

看看动画完成后添加当前类是否会有所帮助。

//$(newPage).addClass('current');
$('h3.title').text('');
$('.slider_container').empty();
$(newPage).slideDown(400, function(){ $(this).addClass("current"); } );
于 2013-06-10T14:19:50.480 回答