我有一个可以响应式调整大小的菜单,因此每次调整大小时 div (#menuWFhover
) 的内容都会重新排列,因此 div 根据窗口大小具有不同的高度。
当我使用 jQuery slideDown/Up
时,它第一次工作正常,但在调整大小后,div 保持前一个动画的高度。这是因为 SlideDown 会根据高度进行动画处理吗?这是我正在使用的简化版本。如果我替换/添加 (windows)resize
(这是我的猜测,它与此有关),动画不会发生,但我可能做错了。
$(document).ready(function(){
var WFover = function () {
$('#menuWFhover').stop().slideDown(300);
};
var WFout = function () {
$('#menuWFhover').stop().slideUp(300);
};
$('#menuNewBox').mouseover(WFover);
$('#menuWFhover').mouseover(WFover);
$('#menuNewBox').mouseout(WFout);
$('#menuWFhover').mouseout(WFout);
});
最佳答案
如ComputerArts mentioned ,问题是 jQuery 在完成动画后显式设置了 div 的高度。然后,即使您在 CSS 中调整了 div 的大小,它也会重用这个显式高度。
当然,现在,您可能应该使用 CSS 动画来完成此类事情。
(参见http://addyosmani.com/blog/css3transitions-jquery/)
如果您需要 jQuery 解决方案,您可以在动画完成后强制高度为未定义,以便 jQuery 获取当前的 CSS 高度。不过,这会稍微改变行为:
演示: http://jsfiddle.net/brianpeiris/8zc5g/show
$(document).ready(function(){
var WFover = function () {
$('#menuWFhover').stop().slideDown(600), function () {
$('#menuWFhover').height('');
});
};
var WFout = function () {
$('#menuWFhover').stop().slideUp(600), function () {
$('#menuWFhover').height('');
});
};
$('#menuNewBox').mouseover(WFover);
$('#menuWFhover').mouseover(WFover);
$('#menuNewBox').mouseout(WFout);
$('#menuWFhover').mouseout(WFout);
$(window).resize(function () {
$.removeData($('#menuWFhover')[0], 'fxshow', true);
});
});
关于jQuery 向下/向上滑动和响应式设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12292413/