JQuery .slideDown（）向上滑动 [英] JQuery .slideDown() is sliding up

问题描述

这有效，但我不知道为什么。在函数capIn（）中，在我看来， $ botcap.slideDown（slow）应该滑动div下。它滑过去了。如果我尝试使用 .slideUp（），则不会发生任何反应，好像它试图将其向下滑动一样。任何人都可以向我解释这一点？

  $（。slide）。hover（capIn，capOut）; 
 
函数capIn（）{
 //幻灯片顶部标题下降
 var $ topcap = $（this）.children（。topcap）; 
 $ topcap.slideDown（slow）; 
 
 //幻灯片底部标题上
 // !!为什么slideDown在这里滑动标题？ 
 var $ botcap = $（this）.children（。botcap）; 
 $ botcap.slideDown（slow）
} 
 
函数capOut（）{
 //幻灯片备份
 var $ topcap = $ （本）。儿童（ topcap。）; 
 $ topcap.slideUp（slow）; 
 
 //向下滑动
 var $ botcap = $（this）.children（。botcap）; 
 $ botcap.slideUp（slow）; 
 
  

解决方案 slideDown 和 slideUp 函数实际上是错误的。正如 slideUp 的文档所表明的那样：

隐藏滑动的匹配元素运动。

隐藏是通过修改元素的高度来实现的;通常情况下，这意味着元素的下边缘看起来向上滑动，因此名称。但是，如果元素锚定在底部（例如，通过设置 position：absolute 和 bottom：0 ），则高度修改会使顶部边缘向下滑动。

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");
}

解决方案

jQuery's slideDown and slideUp functions are actually misnomers. As the documentation for slideUp puts it:

Hide the matched elements with a sliding motion.

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: absolute and bottom: 0), the height modification will make the top edge appear to slide down.

这篇关于JQuery .slideDown（）向上滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！