Jquery 动画宽度缓动是突然的

Question

我正在尝试使用基本 jquery 创建自动文本更改效果。它工作正常，但它在最后一部分时断断续续。我认为这与固定位置的元素有关。不太确定下一步该做什么。非常感谢任何帮助。谢谢。

var adj=['Artists', 'Exhibitions', 'Community', 'Collaboration', 'Productions', 'Collectives', 'Movements', 'Engagement'];
var adj_text = document.getElementsByClassName('changing-text')[0];
var index = 1;
var adj_n = adj.length;
setInterval(function() {
 $(adj_text).animate({width: '0'}, 500, function(){
   $(adj_text)
   // .hide()
          .text(adj[index])
          // .show()
          .animate({width: "150"+"px"}, 1000); 
 })
          
    index = (index + 1) % adj_n;
}, 2000);

div#iv-container {
    height: 100vh;
}
.loader-text{
 left: 20%;
    top: 50%;
    transform: translate(-20%, -50%);
    position: absolute;
    z-index: 100;
    
}
.loader{
   position: relative; 
   opacity: 0;
 cursor: default;
 pointer-events: none;
 left: 0;
  transition: width 0.5s ease-in-out;
}

.loader h1 {
    font-size: 3rem;
    font-family: Dosis;
    font-weight: 400;
}

.loader h1 span.logo-icon{
 font-family: "31brklyn";
 font-weight: normal;
}
.changing-text {
    color: rgb(204, 0, 1);
    position: fixed;
    width: 200px;
}
.loader{
 opacity: 1;
 animation: animInitialHeader 2s cubic-bezier(0.7,0,0.3,1) both;
}

@keyframes animInitialHeader {
 from { 
  opacity: 0; 
  transform: translate3d(-800px, 0, 0); 
 }
}

@font-face {
  font-family: "31brklyn";
  src:url("http://31stbrklyn.com/css/fonts/31brklyn.eot");
  src:url("http://31stbrklyn.com/css/fonts/31brklyn.eot?#iefix") format("embedded-opentype"),
    url("http://31stbrklyn.com/css/fonts/31brklyn.woff") format("woff"),
    url("http://31stbrklyn.com/css/fonts/31brklyn.ttf") format("truetype"),
    url("http://31stbrklyn.com/css/fonts/31brklyn.svg#31brklyn") format("svg");
  font-weight: normal;
  font-style: normal;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="iv-container" class="iv-container">
    <div class="loader-text">
      <div class="loader"><h1>31ST <span class="logo-icon">z</span><span class="changing-text">Artist</span></h1></div>
    </div>  
  </div>

Answer 1

在 setInterval 中将 span 宽度增加到 250px 为：

setInterval(function() {
$(adj_text).animate({width: '0'}, 1000, function(){
     $(adj_text)
     // .hide()
      .text(adj[index])
      // .show()
      .animate({width: "250"+"px"}, 500); 
  })

    index = (index + 1) % adj_n;
}, 2000);

希望它能解决您的问题。

Jquery 动画宽度缓动是突然的

Jquery animate width easing is abrupt

javascript

css

jquery

jquery-animate