jQuery - 动画元素定位

Posted 2023-05-08

【中文标题】jQuery - 动画元素定位

【英文标题】：jQuery - Animate Elements Positioning

【发布时间】：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.

【参考方案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

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