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/

jQuery - ：切换Windows / Tabs时的焦点触发

1 个答案: