从右到左切换输入

I have this working example: JSFIDDLE

我有这个工作示例:JSFIDDLE

$('#btn-search').on('click', function(e) {
    e.preventDefault();
    $('#search').animate({width: 'toggle'}).focus();
});

How can I do that on click it toogle to left instead of right? I want that on click this input grow to left side.

我怎么能这样点击它toogle而不是右边?我希望点击此输入增长到左侧。

2 个解决方案

#1

Working example: http://jsfiddle.net/7tq9146a/1/

工作示例:http://jsfiddle.net/7tq9146a/1/

Using float:right instead of float:left and changed the li order.

使用float:right而不是float:left并更改li顺序。

#2

If I understand you right you want the input to animate so that it grows like so:

如果我理解你正确,你希望输入动画,以便它像这样增长:

             |[button]
         |<--|[button]
       |<----|[button]
    |<-------|[button]

instead of shifting the button like this:

而不是像这样移动按钮:

             |[button]
             |-->|[button]
             |---->|[button]

If so then you are doing 2 things here. You are changing the left positioning (starting position in a relative x/y axis of the dom) of the input and its width. The animate function is only changing the width of the input with the assumption that you don't want to also shift the element's starting position and then pushing the button, which is next in the dom structure, out of the way to accommodate the wider input.

如果是这样,那么你在这里做两件事。您正在更改输入的左定位(在dom的相对x / y轴上的起始位置)及其宽度。 animate函数仅改变输入的宽度,假设您不想也移动元素的起始位置,然后按下dom结构中的下一个按钮,以适应更宽的输入。

In order to fix this you need to change the left positioning as well. The only catch to this is that you'll also need to adjust the positioning of the button as well. Here's how I changed the code you wrote to get the desired behavior:

为了解决这个问题,您还需要更改左侧定位。唯一的问题是你还需要调整按钮的位置。以下是我更改您编写的代码以获得所需行为的方法:

        $('#btn-search').on('click', function(e) {
          e.preventDefault();
          $('#search').animate({
              width: 'toggle', 
              left: "-=177", // The width of the input element 
          }).focus();
          $('#btn-search').animate({left: "-=177"});
        });

There are more issues you'll have to work out if you go down that path. Here is a great article on how to manage the button and input element with a different flavor of JS and css: http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

如果沿着这条路走下去,还有许多问题需要解决。这是一篇很棒的文章,介绍如何使用不同的JS和css管理按钮和输入元素:http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

#1