.fadeIn() w Array

Question

Witam serdecznie,

Nie oszukując się, javascript ledwo co znam, a JQuery tym bardziej. Czarna magia.. jak na razie, i dużo zaległości, które zamierzam nadrobić w jak najszybszym czasie. Na razie nie pozostaje mi nic innego jak zapytać was o pomoc. Do swoich tablic chciałbym dodać efekt fadeIn(), tak aby, każdy napis miał w sobie ten efekt. O to kod: 
 

<script>
	var ilosc = 8
	var teksty = new Array;
	teksty[0] = "tekst1";
	teksty[1] = "tekst2";
	teksty[2] = "tekst3";
	teksty[3] = "tekst4";
	var numer = 0;
	function SelectText()
	{
		numer++;
		if(numer==ilosc) numer=0;
		document.getElementById('dynamic_text').innerHTML = teksty[numer];
	}
		
	window.addEventListener('keydown', function(e)
	{
             if (e.keyCode == 39) return SelectText();
        })
		
</script>

Jest mi ktoś w stanie pomóc ?
Pozdrawiam

Comments

Ten kod co podałeś to bardziej HTML .

---

@Yashe, czemu nazwa funkcji z dużej?

Answer 1

Nie bardzo rozumiem o co chodzi w twoim pytaniu. Chodzi o coś takiego ? Tylko, że to jest bezsensu :D

        function SelectText() {
            numer++;
            const div = document.getElementById('dynamic_text');
            if (numer == ilosc) numer = 0;
            $('#dynamic_text').fadeOut(function() {
                div.innerHTML = '';
            }).fadeIn(function() {
                div.innerHTML = teksty[numer];
            });
        }

 

Ps. jak deklarujesz zmienne to chyba lepiej to wyglada : 

        var ilosc = 8,
            teksty = new Array,
            numer = 0;

I używaj nawiasów przy ifie ZAWSZE

 

Comments

Dokładnie o to chodziło, bardzo dziękuje i do uwag się zastosuje

---

Tylko jest na to nałożony FadeOut, po kliknięciu klawisza następuje animacja i kolejny napis pojawia się szybko, a chciałbym uzyskać efekt również płynnego wejścia :c

---

spróbuj promise

 function SelectText() {
            numer++;
            const div = document.getElementById('dynamic_text');
            if (numer == ilosc) numer = 0;
            $('#dynamic_text').fadeOut(1000, function() {        
                div.innerHTML = teksty[numer];
            }).promise().done(function() {
                $('#dynamic_text').fadeIn(1000, function() {        
                    div.innerHTML = teksty[numer];
                });
            });
        }

 

---

Przepiękne... aż naszła mnie ochota aby samemu potrafić to pisać, a nie wyręczać się innymi. Bardzo dziękuje za pomoc

---

Zacznij od pure js, wtedy baw się w JQuery. Ja niestety zrobiłem ten błąd, że zacząłem od JQuery ;) i teraz nadrabiam .

Praktyka przyjdzie z czasem

Answer 2

const texts = [
  'txt1',
  'txt2',
  'txt3'
];

let number = 0;

const selectText = () => {
  $('#dynamic_text')
    .hide()
    .html(texts[number])
    .fadeIn();
  
  number === texts.length - 1
    ? number = 0
    : number++;
}

$(window).on('keydown', event => {
  event.keyCode === 39 && selectText();
});

nie jestem pewien czy o to ci chodziło...