Question

这是一个简单的问题，但我尝试的一切都不起作用。我对jQuery还很陌生，我不确定最好的方法是什么。它现在的工作方式是完美的，如果我可以让按钮慢慢变大，我不知道如何使用我现在拥有的动画来实现动画，或者如果那样的话甚至我应该做的。我将在下面链接我的代码和CodePen。

这是我的代码：

＆＃13;

$(document).ready(function() {
  $('button').click(function() {
    $(this).addClass('wider');
  });
});

＆＃13;

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}
.wider {
  width: 40%;
}
.wrapper {
  width: 70%;
  margin: 0 auto;
}
header {
  width: 100%;
  height: 100%;
  background-color: #333;
}
header h1 {
  color: white;
  padding-top: 309px;
  font-size: 400%;
}
header h1 span {
  border-bottom: 7px solid #0dc3ff;
}
#button {
  margin-top: 40px;
}
#about {
  color: white;
  font-size: 95%;
  background-color: #0dc3ff;
  border: none;
  padding: 17px 55px;
}
#about:focus {
  outline: none;
}

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

<header>
    <div class="wrapper">
        <div id="caption">
            <h1><span>Independent</span> is who I am.</h1>
        </div>
        <div id="button">
            <button id="about">About Me</button>
        </div>
    </div>
</header>

＆＃13;

http://codepen.io/Clarkpen/pen/yymGXr

Answer 1

在宽度上使用animate函数

 $(document).ready(function() {
        $('button').click(function()  {
            $(this).animate({'width':"30%"},3000);
        });
    });

Answer 2

如果您愿意，可以使用CSS实现此目的：

button {
  width: 10%;
}

button.wider {
  width: 30%;
  -webkit-transition: width 1s ease-in; /* For Chrome 4 - 25, Safari 3.1 - 6, Opera 11.5, iOS 3.2 - 6.1, and Android 2.1 - 4.3 */
  -moz-transition: width 1s ease-in; /* For Firefox 4 - 15 */
  transition: width 1s ease-in;
}

将在1秒的时间内完成，由于ease-in属性，开始时转换速度较慢。

Answer 3

您可以使用CSS3过渡属性为按钮设置动画。 Demo，

还可以使用点击事件尝试。

悬停

#about {    
    width : 50%;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

#about:hover {
    width : 100%;
}

点击活动

$('#about').on('click', function() {
    var widthAnimate = $('#about').css({
        "width":"100%"
    })
    $(this).width(widthAnimate)
})

如何设置此按钮的动画以使其更宽？

3 个答案: