文章/答案/技术大牛

发布

社区首页 >问答首页 >创建一个搜索动画，将文本输入部分从右向左滑动。

问创建一个搜索动画，将文本输入部分从右向左滑动。
EN

Stack Overflow用户

提问于 2015-03-06 09:27:16

回答 1查看 2K关注 0票数 1

当我在it.First中悬停时，我想在搜索循环图标上创建一个动画，该循环只显示如下所示

当我将悬停在循环图标上时，文本输入必须从右边出现，将其宽度增加到左边，并获得100%的宽度。我试过这段代码

jQuery(".main_search .search-field").focusin(function() {
        jQuery(".main_search .screen-reader-text").css( "display", "none");
    });
    jQuery(".main_search .search-field").focusout(function() {
        jQuery(".main_search .screen-reader-text").css( "display", "block");
    });

但它看起来像个虫子。HTMl结构

<div class="about_search">
                <form role="search" method="get" class="search-form" action="http://argentarius.ipoint.com.mt/">
            <label>
                <span class="screen-reader-text">Search for:</span>
                <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
            </label>
            <input type="submit" class="search-submit" value="Search">
        </form>                </div>

jquery

animation

回答 1

Stack Overflow用户

发布于 2015-03-06 09:38:04

您发布的代码不会对图片做任何事情，因为您不能聚焦或聚焦在图片上。

首先，您需要使用

jQuery(".main_search .search-field").mouseover(function(){});
/* and*/
jQuery(".main_search .search-field").mouseout(function(){});

我做了一个小提琴手

我希望这就是你想要的

Sidenote：$(element).stop()用于阻止动画被放入队列。如果您不使用stop()，并且用户一直在div或图片上徘徊，动画就会排队，这有点烦人。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28895768

复制

相似问题

问创建一个搜索动画，将文本输入部分从右向左滑动。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建一个搜索动画，将文本输入部分从右向左滑动。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建一个搜索动画，将文本输入部分从右向左滑动。
EN