滑动功能

Question

我正在寻找从左到右的jquery半滑动功能的帮助，请通过以下网址获取更多信息。 http://jsfiddle.net/prabunivas/Fy9Hs/2/

<div>
    <div id="col1" style="float:left">
        <div style="display:none">Slide DIV</div>
    </div>
    <div id="col2">
        <div style="width:320px;border:1px solid red">Actual content
           <input type="button" id="slide-btn" value="slide" />
        </div>
     </div>
</div>

Answer 1

以下是小提琴的更新代码

HTML

<div>
    <div id="col1" style="float:left; display:none">
        <div>Slide DIV</div>
    </div>
    <div id="col2">
        <div style="width:320px;border:1px solid red">Actual content<input type="button" id="slide-btn" value="slide"/></div>
    </div>
</div>

一些CSS

  #col1 {
    width: 100px;
    height: 25px;
    background: #ccc;
  }

的jQuery

$(document).ready(function(){
    $('#slide-btn').click(function(){
      $('#col1').toggle("slide");
    });
});

你将不得不添加jQuery UI 1.10，有关幻灯片的更多信息可以在 http://api.jqueryui.com/slide-effect/，有关切换的更多信息，请访问http://jqueryui.com/toggle/