jQuery -: focus Triggering При переключении Windows/Tabs

Question

Я пытаюсь найти строку поиска, которая после :focus анимация запускается внутри себя. Анимация вызывается в jQuery.

For better clarification, the search bar can accessed by clicking here.

Проблема, которую я имею, вызывается при нажатии вне браузера или в другой вкладке браузера. Если выбрана строка поиска (:focus), анимация запускается снова и заставляет панель поиска (и ее позиционирование) отбрасываться из исходного места. Это также происходит, если вы по праву нажимаете на панель поиска по какой-либо причине.

Часть JQuery:

var search = $('.searchField'); 
var searchButton = $('.searchSubmit'); 
var searchWidth = $('.searchField').innerWidth(); 
var searchButtonWidth = $('.searchSubmit').innerWidth(); 

search.on('focus', function() { 
    search.animate({ right: '+='+searchButtonWidth }, 800); 
    searchButton.animate({ left: '+='+searchWidth }, 800); 
}); 
search.on('focusout', function() { 
    search.animate({ right: '-='+searchButtonWidth }, 800); 
    searchButton.animate({ left: '-='+searchWidth }, 800); 
}); 

Answer 1

Кажется, что существует конфликт между JQuery анимации и CSS переходы. Если вы удалите все теги перехода в css, он работает так, как ожидалось. Вы можете использовать абсолютные значения вместо относительной + = или - = Смещения:

search.on('focus', function() { 
    search.animate({ left: 0 }, 800); 
    searchButton.animate({ left: searchWidth }, 800); 
}).on('focusout', function() { 
    search.animate({ left: searchButtonWidth }, 800); 
    searchButton.animate({ left: 0 }, 800); 
}); 

Вы должны установить стиль родительского элемента в position: relative;

Вы также можете попробовать этот плагин: http://playground.benbarnett.net/jquery-animate-enhanced/