JQuery .slideDown() 向上滑动
这有效，但我不知道为什么。在 function capIn() 中，在我看来，行 $botcap.slideDown("slow") 应该将 div 向下滑动。它会将其向上滑动。如果我尝试使用 .slideUp() ，则不会发生任何事情，就像它试图将其向下滑动一样。谁能向我解释一下吗？
$(".slide").hover(capIn, capOut);
function capIn(){
//slide top caption down
var $topcap = $(this).children(".topcap");
$topcap.slideDown("slow");
//slide bottom caption up
//!! Why does slideDown slide caption up here?
var $botcap = $(this).children(".botcap");
$botcap.slideDown("slow")
}
function capOut(){
//slide top back up
var $topcap = $(this).children(".topcap");
$topcap.slideUp("slow");
//slide bottom back down
var $botcap = $(this).children(".botcap");
$botcap.slideUp("slow");
}
This works but I'm not sure why. In function capIn(), in my mind the line $botcap.slideDown("slow") should slide the div down. It slides it up. If I try using .slideUp() nothing happens as if it is trying to slide it down. Can anyone explain this to me?
$(".slide").hover(capIn, capOut);
function capIn(){
//slide top caption down
var $topcap = $(this).children(".topcap");
$topcap.slideDown("slow");
//slide bottom caption up
//!! Why does slideDown slide caption up here?
var $botcap = $(this).children(".botcap");
$botcap.slideDown("slow")
}
function capOut(){
//slide top back up
var $topcap = $(this).children(".topcap");
$topcap.slideUp("slow");
//slide bottom back down
var $botcap = $(this).children(".botcap");
$botcap.slideUp("slow");
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
jQuery 的
slideDown和slideUp函数实际上用词不当。正如slideUp的文档所述：通过修改元素的高度来实现隐藏；通常，这意味着元素的下边缘看起来向上滑动，因此得名。然而，如果元素锚定在底部（例如通过设置
position:absolute和bottom:0），高度修改将使顶部边缘看起来向下滑动。jQuery's
slideDownandslideUpfunctions are actually misnomers. As the documentation forslideUpputs it:The hiding is achieved by modifying the height of the element; normally, this means that the lower edge of the element appears to slide up, hence the name. However, if the element is anchored at the bottom (e.g. by setting
position: absoluteandbottom: 0), the height modification will make the top edge appear to slide down.一种可能的解决方法是用容器包装
$('.botcap')元素，并将容器与底部对齐。One possible fix would be to wrap
$('.botcap')elements with a container and align the container to the bottom.这是因为使用绝对位置和bottom: 0; 来定位元素；这实际上会将元素视为基于底部的元素，因此它的 slipDown() 向上移动。可以通过使用 top: （元素的高度）而不是 Bottom: 0 来修复它。
This is because of positioning the element with absolute position and bottom: 0; This will actually treat the element as if it is bottom-based, therefore its slideDown() is going upwards. It can be fixed by using top: (height of element) instead of bottom: 0.