javascript - 动画 .scrollTop

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/