如何在jquery中从下到上显示标题？
如何在jquery中从下到上显示标题？
提问于 2012-05-03 18:45:15
image caption <div class="btheme">
<a href="/a3"><img src="/a3.jpg" /></a>
<div class="caption">
<div>image caption3</div>
</div>
</div>
<div class="btheme">
<a href="/a2"><img src="/a2.jpg" /></a>
<div class="caption">
<div>image caption2</div>
</div>
</div>当鼠标悬停在jquery中时，我使用了以下代码来显示/隐藏标题，
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("div.btheme img").mouseover(function(){
jQuery(this).parent().find("div.caption").slideDown("slow");
});
jQuery("div.btheme img").mouseout(function(){
jQuery(this).parent().find("div.caption").slideUp("fast");
});
});
</script>它工作得很好。标题从上到下显示(由于slideDown)。
但是当我鼠标悬停时，我需要从下到上显示标题。
我该怎么做呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-05-03 20:29:18
我得到了答案，
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("div.btheme img").mouseenter(function(){
jQuery(this).find("div.caption").animate({
width: "180px",
top: "-84px",
display: "block",
opacity: "1"
}, 1000 );
});
jQuery("div.btheme img").mouseleave(function(){
jQuery(this).find("div.caption").stop().animate({
width: "180px",
display: "none",
top: "-60px",
opacity: "0"
}, 500 );
});
});
</script>Stack Overflow用户
发布于 2012-05-03 18:50:50
您可以使用jquery animate来完成此操作。您可以尝试将页边距顶部设置为所需位置的动画。
$('div.caption').animate();这是链接。http://api.jquery.com/animate/
Stack Overflow用户
发布于 2012-05-04 13:01:50
或者我们也可以使用下面的一个，
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("div.btheme img").mouseenter(function(){
jQuery(this).find("div.caption").show('slide', {direction:'down'}, 500);
});
jQuery("div.btheme img").mouseleave(function(){
jQuery(this).find("div.caption").hide('slide', {direction:'down'}, 100);
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10429788
复制相关文章
相似问题
腾讯云开发者
