jquery show hide从右到左onclick

时间:2013-08-16 23:00:57

标签: jquery expand right-to-left

我正在试图获得一个效果,我可以点击图像来显示搜索表单,并将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() {
  });
  });

感谢您的帮助!

2 个答案:

答案 0 :(得分: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() {
    });
    });

});

答案 1 :(得分:0)

您正在寻找jQuery .animate()方法。他们的API网站有文档和示例:.animate documentation can be found here