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切换位置。我正在使用动画来试图让两个元素“滑动”到他们的新位置，而不是让元素从一侧跳到另一侧。

目前，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/

Answer 2

我实际上相信@dfsq答案更好，在CSS中做。但我想修复原始代码，并让其他人使用您的问题选择方法。

DEMO： JSFiddle

<强> JS

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

var searchContainer = searchWidth + searchButtonWidth;

$('#search').css({ width: searchContainer });

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

searchButton.mouseover(function() {
    $('.searchIcon').css('opacity', '0.5');
});
searchButton.mouseout(function() {
    $('.searchIcon').css('opacity', '1');
});

search.bind('keypress', function(event) {
    if (event.keyCode == 13) {
        searchButton.click();
    };
});

searchButton.click(function() {
    search.val(''); 
});

Answer 3

我使用marginRight / marginLeft为它们设置动画，而不是使用右/左定位。

我喜欢你正在使用右/左定位，但对于这种情况，它更容易使用margin-left。如果您使用右/左定位，您还必须更新您的CSS。

另一个选择是使用javascript设置一个类并使用css过渡进行动画制作（就像你使用不透明度一样）。

search.on('focus', function() {
  search.animate({
    marginRight: "50"
  }, 600);

  searchButton.animate({
    marginLeft: "450"
  }, 600);
});

search.on('focusout', function() {
  search.animate({
    marginRight: "0"
  }, 600);
  searchButton.animate({
    marginLeft: "0"
  }, 600);
});

Updated jsFiddle

jQuery - 动画元素定位

3 个答案:

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