Вот код в jsfiddle!как сделать параллельную анимацию на том же элементе
Это the actual site!
Проблема 1: Кажется, что когда я вызываю функции при нажатии кнопки, они не выполняются друг за другом, она иногда работает, если она идет параллельно и делает все сразу! Но это не настоящая проблема, это то, что я хотел бы посоветовать!
Проблема: Когда я вызываю enter, я переключаю все кланы, а затем выполняю параллельную анимацию на div.third (делая зеленый или красный фон, а затем исчезая), проблема в том, что когда я делаю достаточно быстро, измените размер div.fourth до завершения фоновой анимации. Поэтому я думал, что решение для этого будет параллельной анимацией, ведьма не взаимодействует с основной анимацией, поэтому switchClases().
код, где все происходит волшебство:
// Do everytime we press a key
$(document).keydown(function(){
// By presing 'Enter' we call exec.
$("#wraper input.third").bind('keydown',function(e){
// Make key variable by phrasing the event
var keyPresed = (e.keyCode ? e.keyCode : e.which);
// Allow only backspace, delete and enter
if (keyPresed == 46 || keyPresed == 8 || keyPresed == 13){
// If this is true animation is still in progress
if (transAct) {
// OBLIVION
}
// Or else start another animation and execution
else{
// If 'enter' is pressed then and new row and execute everything
if((keyPresed == 13) && $("input.third").val()){
//Set the new uniqueId
uniqueId++;
$("div.second").addClass("class"+uniqueId);
//Get result number because it will not be his name anymore
result = $("input.third").val();
//Switch clases
SwitchClases(_this);
transAct = true;
// Her we actualy insert the new line
$("<div class='first'>9 x 8 = <input class='first' type='text' disabled='true' maxlength='2'/></div>").css("opacity", "0").hide().prependTo(_this).slideDown().animate({opacity: 0.1},function(){
transAct = false;
})
$("div.third").append(" "+result) // Write down inputed result
$("input.third").fadeOut().remove() // Drop input box into black hole
$("div.fifth").fadeOut().remove(); // Do same thing to last division
// Check if answer was correct!
// Here are two examples with whom you can play as much as you like
//$(".leftSide div.class"+(uniqueId-1)).stop().animate({backgroundColor: '#00DD00'},100).animate({backgroundColor: 'white'},900);
// $(".leftSide").stop().animate({backgroundColor: '#DD0000'},100).animate({backgroundColor: 'white'},900);
//Now set focus to next input area , so we can continue and be lazy by not clicking on new input box!
$('.newEleCont input.second').focus();
}
}
}
// Restrict inputing any other character besides a number
else {
// Ensure that it is a number and stop the keypress
if ((keyPresed < 48 || keyPresed > 57) && (keyPresed < 96 || keyPresed > 105)) {
e.preventDefault();
}
}
});
});
1) Как я мог найти решение для двойной анимации?
2) Как я мог бы улучшить этот код (то есть, используя меньше JQuery)
EDIT: Как вы можете видеть, что я добавил дополнительный класс UniqueID к каждому новому div.third. И то, что я хочу сделать, - это отличить анимацию backgroundColor только от данного uniqueID, но не взаимодействуя с базовыми третья> четвертая> пятая анимация класса, например, если у них есть свои собственные вещи!
Необходимо изучить окончательный код, который вы написали, но это ответ, который я искал, спасибо. Но я все еще хочу знать, можно ли сделать две отдельные анимации на одном элементе и не взаимодействовать друг с другом, потому что то, что вы дали мне, является решением, но мне интересно, возможно ли, что начинается одна анимация, и когда я хочу, чтобы я начал новую анимацию на этом объекте, который взаимодействует с separatley ....? – skmasq