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