Question

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#goto').click(function(){ 
    $('html,body').animate({scrollTop:$('#content').offset().top-100},800);
    $(this).stop().animate({ backgroundColor: "#a7bf51"}, 800); 
  });
});
</script>

#goto去了

#content是.......

如果点击#goto，我想要用户滚动到#content

这个功能还可以！

但我想同时改变ul＃content

的背景颜色

我该怎么办？

非常感谢

Answer 1

默认情况下，jQuery无法为颜色设置动画，您需要使用offical jquery color plugin，或者您可以通过css属性进行动画处理。

CSS小提琴：http://jsfiddle.net/9k84X/

jQuery Color Fiddle：http://jsfiddle.net/9k84X/2/

CSS示例：

$(function(){
  $('#goto').click(function(){    
    $('html,body').animate({scrollTop:$('#content').offset().top-100},800);
    $('#content').css({'background-color': "#a7bf51"});
  });
});

jQuery Color示例：

$(function(){
  $('#goto').click(function(){ 
      $('html,body').animate({
          scrollTop:$('#content').offset().top-100
      }, 800);
      $("#content").animate({
            backgroundColor: "#a7bf51"
      }, 800);
  });
});

Answer 2

使用回调。

http://api.jquery.com/animate/

中的更多信息

这应该可行，但检查一下，也许你可能需要将$（this）值更改为特定的DOM。

<script type="text/javascript">
$(function(){
  $('#goto').click(function(){ 
    $('html,body').animate({scrollTop:$('#content').offset().top-100},800,function(){
        $(this).stop().animate({ backgroundColor: "#a7bf51"}, 800); 
    });
  });
});
</script>

如何在Animate（）之后滚动滚动然后更改css背景颜色

2 个答案: