文章/答案/技术大牛

发布

问动画.scrollTop
EN

Stack Overflow用户

提问于 2015-09-01 10:31:54

回答 3查看 385关注 0票数 1

当我点击的时候，我触发了.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/

jquery

javascript

回答 3

Stack Overflow用户

发布于 2015-09-01 10:46:29

使用jquery动画方法实现动画效果。

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/

票数 4

Stack Overflow用户

发布于 2015-09-01 10:36:39

你需要使用动画()，

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

现场演示

如果选项卡已经可见，则更新该选项卡，然后只显示以下内容

// 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);
}

更新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);
}

另一个更新Fiddle

票数 1

Stack Overflow用户

发布于 2015-09-01 10:44:37

您可以使用动画制作方法的JQuery也检查这个例子**jsFiddle:** http://jsfiddle.net/gxkuS/176/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32329370

复制

相似问题

问动画.scrollTop
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动画.scrollTopEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动画.scrollTop
EN