JQuery SlideUp 和 SlideDown 在 Chrome 中无法正常工作

Question

它超出了标记，然后在 Chrome 中再次返回，但在 Firefox 中却没有......

在此处滚动图像 http://dev.nkt-kmc-manjushri.org/

这是我正在使用的代码。

// Set height on excerpt for smooth animation
jQuery(".excerpt").each (function() {
    jQuery(this).css("height", jQuery(this).height());
});

// Hide excerpts by default
jQuery('.excerpt').hide();

// Fade in 
jQuery(".slide").hoverIntent({
    over: slidein,
    timeout: 100,
    out: slideout
}); 

function slidein(){ 
    // jQuery(this).addClass('active').find('.excerpt').animate({"height":500},400);
    jQuery('.slide').not(this).animate({opacity:0.3},400);
    jQuery(this).addClass('active').find('.excerpt').slideDown(500);    
} 
function slideout(){ 
    // jQuery(this).find('.excerpt').animate({"height":0},400);
    jQuery('.slide').removeClass('active').animate({opacity:1},400);
    jQuery(this).find('.excerpt').slideUp(1500);    
} 

Answer 1

是否是 .height() 方法导致了问题？也许尝试仅使用 css (而不是 javascript)设置固定高度？

height: 18em;

我看到的问题是，如果我在每个动画发生之前将鼠标移到多个项目上，它就会出现奇怪的行为。如果我移动得足够快，我会看到文本被图像替换。

也许考虑这样做:

jQuery('.slide').not(this).stop().animate({opacity:0.3},400);

jQuery(this).addClass('active').find('.摘录').stop().slideDown(500);

还有这个:

jQuery('.slide').stop().removeClass('active').animate({opacity:1},400);

jQuery(this).addClass('active').find('.摘录').stop().slideDown(500);

stop() 取消当前动画。

您还可以使用 .animate、.slideUp 和 .slideDown 提供的回调。来自文档:

.animate( properties, [ duration ], [ easing ], [ callback ] )

和

.slideUp( [ duration ], [ callback ] )

然后绑定(bind)和取消绑定(bind)到一些自定义事件来为您制作动画，但这可能有点过头了。