Добавление второго стиля к элементу

[Retro_1477]

У меня есть элемент, я присвоил к нему один стиль, после чего мне нужно добавить ещё один.

for (var i = 0; i < DUCK1_COUNT; i++) {
        $(".menu").after("<img src='img/004-duck.png' class='utka plav'>");
        $(".utka").addClass('Krykvi1'+i);
        $('.Krykvi1'+i).css('transform', 'translate(' + getRandomIn(0, 1500) + 'px, ' + getRandomIn(0, 800) + 'px)');
        if (getRandomIn(3, 6) < 5) {
            $('.Krykvi1'+i).addClass('duck-flip');
            }     
  }

Где начинается оператор if, там присваивается новый класс. Но после присвоения этого НОВОГО класса свойства предыдущего стираются, то есть transform translate убирается и на его место встают свойства класса duck-flip.
Как добавить класс или стиль элементу второй раз?

[рони]

Retro_1477,
а так?

for (var i = 0; i < DUCK1_COUNT; i++) {
        var DUCK = $("<img src='img/004-duck.png' class='utka plav'>")
        .insertAfter(".menu")
        .addClass('Krykvi1'+i)
        .css('transform', 'translate(' + getRandomIn(0, 1500) + 'px, ' + getRandomIn(0, 800) + 'px)');
        if (getRandomIn(3, 6) < 5) {
            DUCK.addClass('duck-flip');
            }
  }

[Retro_1477]

Хорошая попытка, но результат тот же.
Он добавляет класс, но почему-то transform translate блокирует transform scaleX(который в классе duck-flip). Если я убираю translate то scaleX работает.

[рони]

но почему-то transform translate блокирует transform scaleX(который в классе duck-flip).

так устроено, что style имеет приоритет над class, это азбука!!!

[рони]

Retro_1477,
думал у вас проблема с размножением классов
<img src="img/004-duck.png" class="utka plav Krykvi10 duck-flip Krykvi11 Krykvi12 Krykvi13 Krykvi14" style="transform: translate(4px, 4px);">

код выше убирает это.

[Retro_1477]

Я избавился от размножения классов во таким образом

for (var i = 0; i < DUCK1_COUNT; i++) {
        $(".menu").after("<img src='img/004-duck.png' class='utka plav'>");
        $(".utka").addClass('Krykvi1'+i);
        $('.Krykvi1'+i).css('transform', 'translate(' + getRandomIn(0, 1500) + 'px, ' + getRandomIn(0, 800) + 'px)');
        if (getRandomIn(3, 6) < 5) {
            $('.Krykvi1'+i).addClass('duck-flip');
            }
        $( "img" ).removeClass( "utka");
        
  }

Так что с этим всё нормально))

[Retro_1477]

И как поступить?

[рони]

Retro_1477,
как-то так

for (var i = 0; i < DUCK1_COUNT; i++) {
        var DUCK = $("<img src='img/004-duck.png' class='utka plav'>").insertAfter(".menu")
        .addClass('Krykvi1'+i);
        var transform = 'translate(' + getRandomIn(0, 1500) + 'px, ' + getRandomIn(0, 800) + 'px)'
         if (getRandomIn(3, 6) < 5) {
           transform = "?????"
            }
        DUCK.css('transform', transform);
  }

[Retro_1477]

Крч, смотри, у меня происходит спаун уток, в рандомной местах и некоторые из них должны быть повёрнуты на scaleX(-1) воооот

[рони]

Retro_1477,
и в чём проблема?