我如何用多个类使用Jquery动画按钮的背景颜色

How do I animate the background color of button with multiple classes using Jquery?

本文关键字：按钮 动画 背景 颜色 Jquery 何用多      更新时间：2023-09-26

我正在使用Foundation创建一个新网页。在这个页面上，我有这个按钮:

<a href="#bottomOfPage" class="small round button" id="viewOurWorkButton">View Our Work</a>

我想通过简单地改变它的背景色和字体颜色来动画这个按钮。问题是，当我尝试使用id #viewOurWorkButton访问按钮的属性时，什么都没有发生。下面是我想用jquery做的:

$( document ).ready(function() {
  buttonAnimation();
});
function buttonAnimation() {
  $('#viewOurWorkButton').animate({
          $('#viewOurWorkButton').css({backgroundColor:'#fff', color:'#000'})
        }, 1000, function(){
          $('#viewOurWorkButton').animate({
          $('#viewOurWorkButton').css({backgroundColor:'#000', color:'#FFF'})
        }, 1000, buttonAnimation);
      });
}

这也在控制台中显示了这个错误:

Uncaught SyntaxError: Unexpected string

我也试着做。button的动画，但仍然没有效果。下面是.button类的样子:

button, .button {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    border-style: solid;
    border-width: 0;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    line-height: normal;
    margin: 0 0 1.25rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 1rem 2rem 1.0625rem 2rem;
    font-size: 1rem;
    background-color: #008CBA;
    border-color: #007095;
    color: #FFFFFF;
    transition: background-color 300ms ease-out;
}

如何动画。button属性?

您不需要重复selector到animate，您只需要列出properties。animate也支持链化。

请注意，您可以使用jQuery来动画数字属性，但要动画颜色，您需要jQuery-ui。

这似乎可以工作:

$(document).ready(function () {
    buttonAnimation();
});
function buttonAnimation() {
    $('#viewOurWorkButton').animate({
        backgroundColor: '#fff',
        color: '#000'
    }, 1000).animate({
        backgroundColor: '#000',
        color: '#FFF'
    }, 1000, buttonAnimation);
}
 <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
  <script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 <a href="#bottomOfPage" class="small round button" id="viewOurWorkButton">View Our Work</a>

你需要首先在你的页面html中包含jquery UI库，然后我像这样修改你的jquery代码:

$( document ).ready(function() {
  
  
  buttonAnimation();
});
  function buttonAnimation() {
 
  $('#viewOurWorkButton')
        .animate({ backgroundColor:'#fff', color:'#000' }, 1000 )
        .animate({ backgroundColor:'#000', color:'#FFF' }, 1000 );
}
button, .button {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    border-style: solid;
    border-width: 0;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    line-height: normal;
    margin: 0 0 1.25rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 1rem 2rem 1.0625rem 2rem;
    font-size: 1rem;
    background-color: #008CBA;
    border-color: #007095;
    color: #FFFFFF;
    transition: background-color 300ms ease-out;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<a href="#bottomOfPage" class="small round button" id="viewOurWorkButton">View Our Work</a>

相关文章：