Question

所以我有一个h1（＆＃34;你好，我＆＃39; m xxxxxxxxx＆＃34;）并且＃34;你好＆＃34;在＆＃34;问候＆＃34; id和我将js中的文本每隔3s更改为另一种语言的Hello。它工作正常，但我希望它能够顺利改变，但不会突然弹出。

// change text every 3 second
    var text = ["Hola", "Hallo", "Merhaba"];
    var counter = 0;
    var elem = document.getElementById("greeting");
    setInterval(change, 3000);
    function change() {
     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { counter = 0; }
    }

Answer 1

如果通过“平滑变化”表示平滑过渡，就像淡出和淡入一样，我建议您查看jQuery fadeOut和fadeIn方法。

动画持续时间设置为100的function change() { // Fade out $("#greeting").fadeOut(100, function() { // Increment the counter counter++; if(counter >= text.length) { counter = 0; } // Update the text and fade in $("#greeting").text(text[counter]).fadeIn(100); }) }函数可能如下所示：

<?php if (have_posts()) {
    $postcount = 0;
    while (have_posts()) : the_post();
        if ($postcount == 0) { ?>
             <li class="selected" data-date="<?php the_time('F jS, Y'); ?>">
        <?php } else { ?>
             <li data-date="<?php the_time('F jS, Y'); ?>">
        <?php } ?>
        <a class="news-box" href="<?php the_permalink(); ?>" target="_self">
        <?php the_post_thumbnail(); ?>
        <div class="news-inner">
        <div class="news-inner-wrapper">
        <h4><?php the_title(); ?></h4>
        <div class="read-more"><?php the_excerpt(__('Continue reading »','example')); ?></div>
        <div class="news-inner-article-date"><small>By <?php the_author_link(); ?></small></div>
        </div>

    </div>
    </a>
    </li>
    <?php 
      $postcount++;
      endwhile; 
    ?>

Answer 2

使用Jquery，您可能希望使用fadeOut（），然后使用fadeIn（）函数。你的代码就像：

＆＃13;

var text = ["Hola", "Hallo", "Merhaba"];
var counter = 0;
var elem = $("#greeting");
setInterval(change, 3000);
function change() {
    elem.fadeOut(function(){
        elem.html(text[counter]);
        counter++;
        if(counter >= text.length) { counter = 0; }
        elem.fadeIn();
    });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='greeting'>Hello<div>

＆＃13;

Answer 3

你可以通过添加一些css并使用过渡属性来实现。

＆＃13;

var greet = new Array("Hola", "Hallo", "Merhaba");

var counter= 0;
document.getElementById('greeting').innerHTML = greet[counter];

Changegreeting1();
function Changegreeting1(){
  incrementIndex()
  document.getElementById('greeting1').innerHTML = greet[counter];

  document.getElementById('greeting').style.opacity = 0;
 
  document.getElementById('greeting1').style.opacity = 1;

  setTimeout(Changegreeting, 2000);
}
function Changegreeting(){
  incrementIndex();
  document.getElementById('greeting').innerHTML = greet[counter];
 
  document.getElementById('greeting').style.opacity = 1;
 
  document.getElementById('greeting1').style.opacity = 0;
 
  setTimeout(Changegreeting1, 2000);
}
function incrementIndex(){
  if(counter < greet.length - 1 ){
    counter++;
  }else{
    counter = 0;
  }
}

＆＃13;

#greeting{
    transition: opacity 1s;
}
#greeting1{
    transition: opacity 1s;
    position:absolute;
    top:0px;
    margin-top:0px
}

＆＃13;

<p id = "greeting"></p>
    <p id = "greeting1"></p>

＆＃13;

这就是你想要的吗

我希望我的文本更改动画在javascript中顺利过渡

3 个答案: