Анимации после отправки формы поля

Question

У меня есть Div контейнер с полем формы в моем HTML:

<div class="flex_item" id="b_one"> 
    <form id="f_one"> 
     <input id="i_one" type="text"> 
    </form> 
</div> 

Теперь я пытаюсь изменить BackgroundColor в DIV, написав требуемый цвет в поле ввода :

$(document).ready(function(){ 
    $("#f_one").submit(function() { 
     var input = $("i_one").val(); 
     $("#b_one").animate({left: '75px', width: '-150px'}, callbackColor('#b_one', '#i_one', input)); 
    }); 
}); 
function callbackColor(container, i_number, color) { 
    return function() { 
     $(container).css('background-color', color); 
     $(i_number).css('background-color', color); 
     $(container).animate({left: '75px', width: '300px'}); 
    } 
} 

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

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

Answer 1

Вам необходимо предотвратить поведение формы по умолчанию при отправке. Событие доступно для вас после запуска обработчика событий. animate Функция также принимает параметр скорости.

$(document).ready(function(){ 
    $("#f_one").submit(function (event) { 
     event.preventDefault(); 
     var input = $("#i_one").val(); 
     $("#b_one").animate({left: '75px', width: '-150px'}, 1000, callbackColor('#b_one', '#i_one', input)); 
    }); 
}); 

function callbackColor(container, i_number, color) { 
    $(container).css('background-color', color); 
    $(i_number).css('background-color', color); 
    $(container).animate({left: '75px', width: '300px'}); 
} 

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