JQuery .slideDown() 向上滑动
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.
相关文章