Обеспечение в контексте цикла forEach, что два разных идентификатора могут быть изменены одновременно?

Question

Или как два действия, связанные с двумя разными идентификаторами, можно связать вместе?

Я использую forEach для обхода массива изображений персонажей и их анимации в разное время. (Я также использую.data, чтобы связать другие изображения с этими изображениями персонажей, но я не уверен, поможет ли это мне здесь или нет.)

Кажется, у меня возникла проблема: я хочу немного изменить CSS, связанный с конкретным персонажем, но поскольку анимации персонажей (из них выпадающие) несколько случайны, чаще всего другой персонаж запускает эту функцию в первую очередь и, таким образом, Запустите строку CSS, прежде чем приземлится определенный символ (связанный со строкой CSS).

Это две конкретные строки; Я даю больше контекста ниже:

$("#"+ link.data("animations")).attr('src', imageUrlCharacter+'animations-sitting.png'); 
$("#shadow2").css("top", "5px");

Как я могу гарантировать, что эта одна строка кода CSS не будет работать, пока цикл forEach не обнаружит, что изображение символа изменилось? Могу ли я снова использовать.data каким-то образом, о котором раньше не думал, или есть более простой способ?

Вот суть кода:

var containers = ["#portfolio-container","#animations-container", etc.];

var links = ["#portfolio", "#animations", "#games", "#fun"];

containers.forEach(function(current){
var link = $(current);
...
link.animate({
        top: '0'
    }, {
        duration: randomTime,
        easing: 'easeOutBounce',
        step: function(now, tween) {
        ...
        }

        complete: function() {
            $("#"+ link.data("dust")).attr('src', 'images/trans.png');
            setTimeout(function() {
                $("#"+ link.data("portfolio")).attr('src', imageUrlCharacter+'portfolio-sitting.png');
                $("#"+ link.data("games")).attr('src', imageUrlCharacter+'games-sitting.png');
                $("#"+ link.data("animations")).attr('src', imageUrlCharacter+'animations-sitting.png'); 
                ("#shadow2").css("top", "5px");
            }, 500);
        }
    }
}

---- попытки ----

Я надеялся, что что-то вроде этого может сработать:

$("#"+ link.data("fun")).attr('src', url).$("#shadow2").css("top", "-25");

Я также получил этот рабочий вид, пытаясь изменить CSS после изменения соответствующего URL:

if ($("#"+ link.data("animations")).attr('src').indexOf('animations-sitting') > 0) 
{ 
    $("#shadow2").css("top", "5px");
}

но в итоге получаю ошибку TypeError: $(...).attr(...) is undefined,

Я попытался объединить их в одну функцию, но не смог:

(function(){
    $("#"+ link.data("animations")).attr('src', imageUrlCharacter+'animations-sitting.png'); 
    })($("#shadow2").css("top", "5px"));

----

Дайте мне знать, если это неясно, и спасибо заранее.

Answer 1

Я думаю, что я получил это работает. Я был в состоянии использовать .load чтобы связать изменение CSS с изменением изображения:

$("#"+ link.data("animations")).attr('src', url).load(function() {

    $("#shadow2").css("top", "5px"); 

});