JQuery показать скрыть справа налево 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

Вы ищете метод jQuery .animate(). Их API сайт содержит документацию и примеры: .animate documentation can be found here

Answer 2

Это то, что я в конечном итоге делает:

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

});