Почему не срабатывает условие?

Question

[loogle18]

Привет всем!

Подскажите пожалуйста, почему не срабатывает условие?

Сам отрезок кода:

var me = $('#me_up');
	$(win).keydown(function(pressKey) {
		console.log(pressKey.keyCode);
		if (pressKey.keyCode == 38) { // При нажатии клавиши вверх
			me.attr('src', 'deep_space/me_up.png');
		}
		else if (pressKey.keyCode == 40) { // При нажатии клавиши вниз
			me.animate({rotate : '-180deg'}, 500);
			me.attr('src', 'deep_space/me_up.png');
		}
		else if (pressKey.keyCode == 38 && me.attr('style') == 'transform: rotate(-180deg) scale(1, 1)') { // При нажатии клавиши вверх и соответствии стиля
			me.animate({rotate : '360deg'}, 500);
		}
	});

Суть проблемы в том, что при нажатии клавиши вниз, картинка делает плавный поворот на -180 град, но после этого при нажатии клавиши вверх, поворот снова осуществляться не хочет...

Заранее спасибо!

Answer 1

[IceJOKER]

Потому что срабатывает первый IF и все, else if означает , что нужно выполнить условие, если предыдущее выполнилось с false, поэтому первый выполнился, а последний так и остался ))

if (pressKey.keyCode == 38)
{
    //для этого условия код выполните в одном месте, тут можно проверить есть в аттрибуте style и т.д.
}
else if(pressKey.keyCode == 40)
{

}

И можно же без else , вряд ли у одной клавиши два значения может сработать одновременно О_О

p.s. какая-то жуткая проверка style, нельзя ли присвоить класс и потом проверять hasClass

Comments

[loogle18]

Йой точно! Башка моя дырявая! Запаниковал... Простите))
И спасибо за ответ!

[loogle18]

Да я так на скорую руку писал;) После по-человечески перепишу;)

[IceJOKER]

Святослав: you're welcome )

[loogle18]

IceJOKER: У меня еще небольшой вопрос: почему при первом нажатии картинка переворачивается с указанной задержкой (500), а после последующих нажатий задержка увеличивается примерно до четырех секунд и выше? Может нужно обновить переменную или типа того? ;) Буду благодарен.

[IceJOKER]

Святослав: мне бы пример, а то не совсем понятно что вы хотите сделать , а вникаться в код лень )
а так если 500 мс указано, то за это время и должна закончиться анимация, ничего обновлять не нужно.
думаю у вас со свойством transform что-то не так

[loogle18]

IceJOKER: да, я понимаю) Я вот сделал все через addClass, анимации поворота, конечно, нет, но зато все работает быстро) Позже, как Вы и сказали, проверю или с transform все норм)

[IceJOKER]

Святослав: transition: ...; // анимацию с помощью css

[loogle18]

IceJOKER: Аха) Совпадение) Вот как раз на ней сделал ;) Работает круто) Понял, что нужно и css скилы немало подтянуть)

Answer 2

[Алексей Шеин]

Третья ветка

else if (pressKey.keyCode == 38 && me.attr('style') == 'transform: rotate(-180deg) scale(1, 1)') { // При нажатии клавиши вверх и соответствии стиля
      me.animate({rotate : '360deg'}, 500);
    }

никогда не выполнится, т.к. первая ветка (pressKey.keyCode == 38) содержит более мягкое условие, чем третья. Т.е. во всех случаях когда третья ветка могла бы выполниться, выполняется первая, т.к. она проверяется раньше.
Перепишите на следующий код:

if (pressKey.keyCode == 38) { // При нажатии клавиши вверх
    if (me.attr('style') == 'transform: rotate(-180deg) scale(1, 1)') { // При нажатии клавиши вверх и соответствии стиля
      me.animate({rotate : '360deg'}, 500);
    } else {
      me.attr('src', 'deep_space/me_up.png');
    }
}
    else if (pressKey.keyCode == 40) { // При нажатии клавиши вниз
      me.animate({rotate : '-180deg'}, 500);
      me.attr('src', 'deep_space/me_up.png');
}

Comments

[loogle18]

Спасибо большое за помощь! Перепишу!)