jQuery - :focus 切换窗口/选项卡时触发

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 animate 和 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/