jQuery-:focus Triggering When Switching 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/