如何隐藏，然后向左滑动一个搜索框？ [英] how to hide then slide left a search box?

问题描述

我是新来的Jquery，不能让我的头围这个。

我有一个搜索图标，当我按下时，我想要一个搜索框向左滑动，但不能让我的头围绕它。

感谢

p> HTML：

 < div id =search-container> 
< div class =search-bar> 
< input name =ctl00 $ txtSearchtype =textid =ctl00_txtSearchclass =searchboxvalue =Searchonfocus =this.value =''> 
< / div> 
< button type =submitname =ctl00 $ btnSearchvalue =Goid =ctl00_btnSearchclass =searchbutton search-bg show>< / button> 
< / div> 
  

Jquery

  $（document）.ready（function（）{
 $（'＃search-container input'）。click（function（）{
 $（this）.next（）。slideToggle （）; 
}）; 
}）; 
  

解决方案

您必须添加图像才能触发slideout这个输入在隐藏时是不可点击的：P）

你会得到这样的：

 < div class =search-bar> 
< input name =ctl00 $ txtSearchtype =textid =ctl00_txtSearchclass =searchboxvalue =Searchonfocus =this.value =''> 
< / div> 
< img src =SomeImage.pngclass =trigger/> 
  

然后给 .search-bar {width：0;

  $（document）.ready（function （）{
 $（'＃search-container .trigger'）click（function（）{
 //隐藏触发器图像：
 $（this）.animate 0}，1000）; 
 //同时滑动div打开
 $（'。search-bar'）animate（{width：'toggle'}，1000，function 
 //此函数/代码将在完成后执行：
 $（this）.find（'input'）[0] .focus（）; //对于红利，输入现在将获得autofocus 
}）; 
}）; 
}）; 
  

- > jQuery动画文档（动画而不是幻灯片，幻灯片不做legt / right，动画可以）

小sidenote为更全局缩放：

* 形式元素不滑动或动画。添加一个包装div到这些。

*宽度为scricks的元素会使内容像 p 得到所有小而奇怪的。给予宽度以防止

---

使用css3更新

已经有一段时间了，并且有一个（更好的）备选可用，css3转换：

  .menu {
 overflow：hidden; 
 max-width：0; 
 width：200px; 
 transition：max-width 1s 
} 
 .Opened.menu {
 max-width：200px; / *必须是数字，'无'不工作* / 
} 
  

使用jQuery的 .toggleClass（） 这是非常容易，你给一些风格控制回css。 提示：您还可以使用：hover

代替类

I'm new to Jquery and can't get my head round this.

I have a search icon that when is pressed I want a the search box to slide out to the left but can't get my head round it. Is there any useful tutorials out there or can someone let me know what im doing wrong in my Jquery.

Thanks

HTML:

<div id="search-container">
    <div class="search-bar">
        <input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" class="searchbox" value="Search" onfocus="this.value=''">                   
    </div>
    <button type="submit" name="ctl00$btnSearch" value="Go" id="ctl00_btnSearch" class="searchbutton search-bg show"></button>                       
</div>

Jquery

$(document).ready(function() {
   $('#search-container input').click(function() {
   $(this).next().slideToggle();
  });
});

解决方案

You have to add an image to trigger the slideout (this input is not clickable when hidden :P)

You'll get something like this:

<div class="search-bar">
    <input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" class="searchbox" value="Search" onfocus="this.value=''">           
</div>
<img src="SomeImage.png" class="trigger"/>                  

Then give .search-bar{ width: 0; overflow:hidden;}and animate it to normal.

$(document).ready(function() {
    $('#search-container .trigger').click(function() {
        // Hide the trigger image:
        $(this).animate({width:0},1000);
        // At the same time slide the div open
        $('.search-bar').animate({width: 'toggle'},1000, function(){
            // This function/ code will be executed on complete:
            $(this).find('input')[0].focus(); // For bonus, the input will now get autofocus
        });
    });
});

-> jQuery animate documentation (animate instead of slide, slide does not do legt/right, animate can)

Small sidenote for a more global scale:
* form elements dont slide or animate. Add a wrapping div to those.
* The element that scricks in width will make content like a p get all small and weird. Give those a width to prevent that

---

Update with css3

It's been a while, and there is a (better?) alternative available, css3 transition:

.menu{
    overflow: hidden;
    max-width: 0;
    width: 200px;
    transition: max-width 1s
}
.Opened.menu{
    max-width: 200px; /* Has to be a number, 'none' doesnt work */
}

Combined with jQuery's .toggleClass() this is very easy, and you give some style-control back to css. Tip: Instead of the class, you could also use the :hover

这篇关于如何隐藏，然后向左滑动一个搜索框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！