Question

当我点击时，我会触发.scrollTop，它似乎有效。但页面直接上升/下降。如何动画这个？所以用户真的可以理解发生了什么。我需要为这段代码制作动画：jQuery(window).scrollTop(jQuery(".tabs").offset().top);

整个Java脚本：

jQuery(document).ready(function() {

jQuery('.tabs .tab-links a').on('click', function(e)  {
    var currentAttrValue = jQuery(this).attr('href');

    // Show/Hide Tabs
   jQuery('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400); 

   console.log(currentAttrValue);
    jQuery(window).scrollTop(jQuery(".tabs").offset().top);
    jQuery(".tab-links li").removeClass("active");
    jQuery('a[href="'+currentAttrValue+'"]').parent('li').addClass('active');

   e.preventDefault();
});

}）;

HTML：

<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
    </ul>  

    <div class="tab-content">

        <div id="tab1" class="tab active">
                 <div id="lipsum">Long content</div>
        </div>

        <div id="tab2" class="tab">
                 <div id="lipsum">Long content</div>
        </div> 

    </div>

    <div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
    </ul>
</div>
</div>

的jsfiddle：

http://jsfiddle.net/4m2ut16k/12/

Answer 1

使用jquery animate方法进行动画效果。

jQuery('.tabs ' + currentAttrValue).slideDown(1000,function() {
       jQuery(this).animate({opacity: '0.5'});
}).siblings().slideUp(1000,function(){
    jQuery(this).animate({opacity: '0.5'});   
});

实时链接http://jsfiddle.net/4m2ut16k/12/

Answer 2

您需要使用animate()之类的，

jQuery('html,body').animate({ // html,body not window
                 'scrollTop':jQuery(".tabs").offset().top
           },1000); //1000 is duration here

Live Demo

如果标签已经可见，则更新，然后仅像<，p>那样设置动画

// Show/Hide Tabs, if visible then animate
if (jQuery('.tabs ' + currentAttrValue).is(':visible')) {
  jQuery('html,body').animate({
       'scrollTop': 0  // scroll to 0 to make it consistent for both tabs
  }, 1000);
} else {
   jQuery('.tabs ' + currentAttrValue).slideDown(400)
                                      .siblings().slideUp(400);
}

Updated Fiddle

另一个更新，您需要检查当前的兄弟姐妹的高度，然后检查滚动顶部位置，

var $curr=jQuery('.tabs ' + currentAttrValue),
    $sib=jQuery('.tabs ' + currentAttrValue).siblings();
// Show/Hide Tabs, slidedown then animate       

if($curr.height() < $sib.height()){
    if(jQuery('html,body').scrollTop() == 0){
        $curr.slideDown(400).siblings().slideUp(400);
    } else {
        jQuery('html,body').animate({
            'scrollTop': 0
        }, 1000);
        $curr.show().siblings().hide();
    }     

} else {        
    $curr.slideDown(400,function(){
        jQuery('html,body').animate({
            'scrollTop': 0
        }, 1000);
    }).siblings().slideUp(400);
}

另一个Updated Fiddle

Answer 3

您可以使用JQuery的animate方法查看此示例**jsFiddle:** http://jsfiddle.net/gxkuS/176/

动画.scrollTop

3 个答案: