jQuery - 动画元素定位

Question

如何让下面列出的 jQuery 正确设置动画？

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

search.on('focus', function() {
    search.animate({
        'right':'auto',
        'left':'0'
    }, 600);
    searchButton.animate({
        'right':'0',
        'left':'auto'
    }, 600);
});
search.on('focusout', function() {
    search.animate({
        'right':'0',
        'left':'auto'
    }, 600);
    searchButton.animate({
        'right':'auto',
        'left':'0'
    }, 600);
});

理想情况下，我希望 searchButton 从左到右，在 :focus 上，用 search 切换位置。我正在使用 animate 来尝试让两个元素“滑动”到它们的新位置，而不是让元素从一侧跳到另一侧。

目前，searchButton 不会在 :focus 上向右移动，search 元素会跳转到左侧定位，而不是具有“滑动”效果。

For the live jsFiddle, click here.

Answer 1

我认为使用简单的 CSS 过渡很有意义:

.searchField {
    /* ... */
    top: 0;
    right: 0;
    transition: all .6s ease;
    &:focus {
        /* ... */
        right: 50px;
        &+.searchSubmit {
            left: 100%;
            margin-left: -50px;
        }
    }
}

同时删除 </input> ，输入元素是自闭标签:<input /> .

演示:http://jsfiddle.net/u97jkeq1/8/