为块元素的宽度设置动画，因为它随 jQuery 的变化而变化？

Question

我有一个块元素，它根据它所处的状态改变它的宽度。

Here's a fiddle 告诉你我的意思。

单击黑色按钮时，您会看到该按钮内的文本发生变化，从而减小了整体宽度。我想知道是否有一种方法可以通过 CSS 或 JS 在单击按钮时让宽度平滑地设置动画。

HTML

<a id="contact-button" href="#">Get in touch</a>

<div id="primary"></div>
<div id="contact-keebs"></div>

CSS

#contact-button {
    background: #000;
    background-size: 24px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
#primary {
    background: red;
    height: 200px;
    position: absolute;
    width: 200px;
}
#contact-keebs {
    background: blue;
    display: none;
    height: 200px;
    position: absolute;
    width: 200px;
}

JS

var c = 0;
$('#contact-button').click(function (e) {

    e.preventDefault();

    if (c++ % 2 == 0) {

        $(this).addClass('work-button').text('Work');
        $('body').addClass('contact-content');
        $('#contact-keebs').finish().stop().fadeIn(500);

    } else {

        $(this).removeClass('work-button').text('Get in touch');
        $('body').removeClass('contact-content');
        $('#contact-keebs').finish().stop().fadeOut(500);

    }
});

Answer 1

在#contact-button

上使用此 CSS

过渡：宽度 2s 线性；

Answer 2

您可以使用 transition 为 width 设置动画。

var c = 0;
$('#contact-button').click(function(e) {
  e.preventDefault();
  if (c++ % 2 == 0) {
    $(this).addClass('work-button').text('Work');
    $('body').addClass('contact-content');
    $('#contact-button').css('width', '30px');
    $('#contact-keebs').finish().stop().fadeIn(500);
  } else {
    $(this).removeClass('work-button').text('Get in touch');
    $('#contact-button').css('width', '85px');
    $('body').removeClass('contact-content');
    $('#contact-keebs').finish().stop().fadeOut(500);
  }
});

#contact-button {
  background: #000;
  background-size: 24px;
  color: #fff;
  width: 85px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  padding: 10px 20px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  transition: all 0.4s cubic-bezier(.09,1.31,1,1.28);
  white-space: pre;
  overflow: hidden;
}
#primary {
  background: red;
  height: 200px;
  position: absolute;
  width: 200px;
}
#contact-keebs {
  background: blue;
  display: none;
  height: 200px;
  position: absolute;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="contact-button" href="#">Get in touch</a>
<div id="primary"></div>
<div id="contact-keebs"></div>

Answer 3

也许不是最好的解决方案，但您可以使用 CSS 过渡并指定宽度（这是不好的部分）。像这样：http://jsfiddle.net/ddac5391/12/

该代码非常简单，在 CSS 中，您只需将其添加到 #contact-button 样式中：

overflow:hidden;
width:150px;
height:18px;
transition: width 0.5s linear;
-webkit-transition:width 0.5s linear;

（其中一些像 height 或 overflow 并不是真正需要的）

然后在JS中，指定方框before/after的width改变文字内容：

$(this).addClass('work-button').text('Work').css({width:"70px"})
...
$(this).removeClass('work-button').text('Get in touch').css({width:"140px"});

然后点击按钮查看grow/shrink.

为块元素的宽度设置动画，因为它随 jQuery 的变化而变化？

Animate the width of a block element as it changes with jQuery?

javascript

css

jquery