Javascript 在div上切换div水平单击

我制作了一个有人脸背景图像的div，我设计了一个包含段落、两个按钮和一个输入框的div

我知道这个问题经常被问到，但是我的情况不同，我希望我的div带有一张脸的背景图像可以点击，这样包含所有其他内容的div就会从左侧滑出

最好的方法是什么

HTML

<div id="image"></div>
<div id="container">

<p>I like nutella and croissants</p>

<input id="message" placeholder="type...." required="required" autofocus>

 <button type="button" id="send">Send</button>
 <button type="button" id="close">Close</button>

</div>

JQUERY

    $(document).ready(function(){
$( "#image" ).click(function() {
    jQuery(this).find("#container").toggle();
});
});

通过使用Raimov发布的（在我意识到他也发布了它之前，我实际上在谷歌搜索中遇到了它；），我们可以使用jQuery在单击切换元素时设置宽度的动画。请记住，背景不会为元素添加大小，因此背景图像的切换必须设置高度属性。此外，如果表单中有长行文本，则必须自己包装它们或使用文章中的其他方法

这是一个演示，下面是代码：

$(document).ready(function () {
    $("#image").click(function () {
        $("#container").animate({width: 'toggle'});
    });
});

这是必要的：

div#image {
    background: url(http://i.imgur.com/PF2qPYL.png) no-repeat;
    height: 36px;
    /*height needed to actually show the div (default width is 100%)*/
}

#container {
    white-space: nowrap;
    overflow: hidden;
}

我为您创建了一个表单，在单击img后，表单将隐藏到左侧

$("#image").click(function() { 
var $lefty = $(this).children(); //get the #container you want to hide
$lefty.animate({
  left: parseInt($lefty.css('left'),10) == 0 ?
    -$lefty.outerWidth() : 0
});

资源取自：

---

.

太好了，谢谢！有没有办法让容器在我点击图像之前不可见？为什么它是溢出的：隐藏的？

$("#image").click(function() { 
var $lefty = $(this).children(); //get the #container you want to hide
$lefty.animate({
  left: parseInt($lefty.css('left'),10) == 0 ?
    -$lefty.outerWidth() : 0
});