Mam więc H1 ("Hello, jestem xxxxxxxxx") i owij się "cześć" w rozpiętości z "powitaniem" ID i zmieniam tekst w JS co 3s do cześć w innym języku. Działa dobrze, ale chcę, żeby zmienić się płynnie, ale nie pojawiają się nagle.

// 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; }
    }
5
Ahmet Ömer 27 czerwiec 2017, 16:50

3 odpowiedzi

Najlepsza odpowiedź

Z jQuery możesz użyć Fadeout (), a następnie Fadein () funkcji. A Twój kod byłby jak:

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();
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='greeting'>Hello<div>
5
F3L1X79 27 czerwiec 2017, 14:19

Możesz to zrobić tylko dodając niektóre CSS i korzystając z własności przejściowej.

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;
  }
}
#greeting{
    transition: opacity 1s;
}
#greeting1{
    transition: opacity 1s;
    position:absolute;
    top:0px;
    margin-top:0px
}
<p id = "greeting"></p>
    <p id = "greeting1"></p>

Czy to, czego chcesz

0
Dr._Duck 27 czerwiec 2017, 14:11

Jeśli przez "zmienić płynnie", masz na myśli pewne płynne przejście, jak w zniknie i zniknie, sugeruję, sugeruję patrząc na jQuery Fadeout i Fadein Metody.

Funkcja change() z czasem trwania animacji ustawiona na 100 może wyglądać na coś takiego:

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);
   })
}
0
emanek 27 czerwiec 2017, 14:04