jquery - jquery show hide 从右到左 onclick

Question

我正在尝试获得一种效果，我可以单击图像以显示搜索表单，并将 div 从右向左扩展

这是我尝试过的代码

html

 <div class="searchbox">
 This is some text that I need to hide.<span class="clickme">Click Me</span>
 </div>

css

 .searchbox {
  height: 20px
  overflow: hidden;
  }

jQuery

  $( ".clickme" ).click(function() {
  $( ".searchbox" ).animate({
  left: "+=100",
  width: "toggle"
  }, 500, function() {
  });
  });

谢谢你的帮助！

Answer 1

这就是我最终做的事情：

HTML

 <div>
 <div class="searchbox" data-thmr="thmr_80">
 <img class="clickme" data-thmr="thmr_80" src="/sites/default/files/sherlock.png">
 </div>

CSS

 .clickme {
 left: 720px;
 position: relative;
 top: 17px;
 }

.searchbox {
 display: none;
 float: right;
 height: 50px;
 overflow: hidden;
 width: 275px;
 }

jQuery

 $(document).ready(function(){

    $( ".clickme" ).click(function() {
    $( ".searchbox" ).animate({
    width: "toggle"
    }, 500, function() {
    });
    });

});

Answer 2

您正在寻找 jQuery.animate()方法。他们的 API 站点有文档和示例：.animate 文档可以在这里找到