我正在尝试使用基本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>
&#13;
答案 0 :(得分:3)
将span
中的250px
宽度增加到setInterval
为:
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);
希望它能解决您的问题。