Potrzebuję kolorowej animacji jQuery bez funkcji CSS3.

Zakodowałem to:

function button_selection() {
    setTimeout(button_selection, 800);
    setTimeout(function () { $(".color").css("color", "yellow"); }, 200);
    setTimeout(function () { $(".color").css("color", "blue"); }, 400);
    setTimeout(function () { $(".color").css("color", "red"); }, 600);
    setTimeout(function () { $(".color").css("color", "green"); }, 800);
}
setTimeout(button_selection, 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="color">Hello world, I love you all.</h1>

W mojej przeglądarce to działa. Ale myślę, że kod nie jest naprawdę „dobry”. Jak byłoby możliwe zapisanie kolorów w jednej linii, a następnie po prostu kontrolowanie prędkości?

Dzięki.

2
Anna_B 1 kwiecień 2020, 04:57

5 odpowiedzi

Najlepsza odpowiedź

Nie potrzebujesz jQuery. Zrób licznik, zwiększaj go co n milisekund i ustaw kolor w zależności od stanu licznika.

const element = document.querySelector('.color');
const colors = ['yellow', 'blue', 'red', 'green']; // The colors you want
const colorDuration = 200; // The duration of a color in milliseconds
let colorIndex = 0;

function switchColor() {
    element.style.color = colors[colorIndex++ % colors.length];
}
switchColor();
setInterval(switchColor, colorDuration);
<h1 class="color">Hello world, I love you all.</h1>
1
Finesse 1 kwiecień 2020, 02:12

Może to działa dla Ciebie:

const CONFIG = {
  colors: ['yellow', 'blue', 'red', 'green'],
  speed: 200
};

function button_selection() {
  let counter = 0;
  
  setInterval(() => {
    $(".color").css("color", CONFIG.colors[counter]);
    
    counter = counter < CONFIG.colors.length ? counter + 1 : 0;
  }, CONFIG.speed);
};

button_selection()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="color">Hello world, I love you all.</h1>
1
Alejandro Lariccia 1 kwiecień 2020, 02:31

Utwórz tablicę i przypisz pary klucz / wartość do wartości, przez które chcesz iterować. Następnie użyj $.each(), aby iterować po tej tablicy w swojej funkcji.

function button_selection() {
    setTimeout(button_selection, 800);
    let colors = {"yellow": 200, "blue": 400, "red": 600, "green": 800};
    $.each( colors, function( key, value ) {
      setTimeout(function () { $(".color").css("color", key); }, value);
    });    
}
setTimeout(button_selection, 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="color">Hello world, I love you all.</h1>
1
dale landry 1 kwiecień 2020, 02:30

Poszedłbym z tym

const colors = ['yellow', 'green', 'blue', 'red']
const INTERVAL = 200;

colors.forEach((color, index) => {
  setTimeout(() => { $('.color').css("color", colors[index]) }, index*INTERVAL) 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<h1 class="color">Hello world!<h1>
1
Adrian Solarczyk 1 kwiecień 2020, 02:33

Możesz przechowywać wszystkie kolory w tablicy, a następnie użyć zmiennej przyrostowej, aby przypisać kolory z indeksem.

Możesz także użyć setInterval zamiast setTimeout.

function button_selection() {
    let colors = ["yellow", "blue", "red", "green"];
    let index = 0;
    $(".color").css("color", colors[index]);
    setInterval(() => {
        ++index;
        if (index >= colors.length) index = 0;
        $(".color").css("color", colors[index]);
    }, 1000);
}
setTimeout(button_selection, 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="color">Hello world, I love you all.</h1>
1
Sohail Ashraf 1 kwiecień 2020, 02:50