Question

我制作了一个有脸的背景图像的div，我设计了包含段落，2个按钮和输入框的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>

CSS

div#image { background: url(http://i.imgur.com/PF2qPYL.png) no-repeat; }

JQUERY

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

Answer 1

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

http://jsfiddle.net/iansan5653/wp23wrem/是一个演示，这是代码：

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

这个CSS是必要的：

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;
}

Answer 2

我为你创建了一个jsFiddle，点击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
});

该资源来自： Tutorial how to slide elements in different directions

div上的div切换div水平点击

2 个答案: