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() {
    });
    });

});