jQuery - 动画元素定位答案

【问题标题】：jQuery - Animate Elements PositioningjQuery - 动画元素定位
【发布时间】：2015-01-09 19:24:33
【问题描述】：

如何让下面列出的 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.

【问题讨论】：

标签： jquery html css position jquery-animate

【解决方案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/

【讨论】：

感谢<input /> 的提醒。这个解决方案很简单。
很好，我从来不知道将伪类放在选择器 &:active 中。 +1
@Billy 注意，这是 SASS，而不是纯 CSS :)
谢谢你让我知道，这会让我摸不着头脑

【解决方案2】：

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

我喜欢你使用右/左定位，但在这种情况下，使用左边距更容易。如果您使用右/左定位，您还必须更新您的 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

【讨论】：

【解决方案3】：

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

演示： JSFiddle

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(''); 
});

【讨论】：