Question

$('.gallery2').hover(function(){

    $('.upperdiv').animate({
        'height':'65px'
    },300);
    $('.lowerdiv').animate({
        'height':'65px',
        'top':'30.4%'
    },300);
}).mouseleave(function(){
    $('.upperdiv,.lowerdiv').fadeOut(300);
});

有没有人能为我提供一些解决方案？当我再次将它悬停时，动画的div将不会出现。

Answer 1

fadeIn / Out动画不透明度，而你动画高度和顶级道具。因此，当您调用fadeOut并且未调用fadeIn时，元素将保持不可见。

Answer 2

jQuery方法hover接受两个要作为参数执行的函数，一个在mouseenter上，一个在mouseleave上

不要使用fadeOut withoud fadeIn，因为它不仅会改变不透明度，还会使元素内联样式display:none在再次显示元素时需要还原。

所以jS就是这样：

$('.gallery2').hover(function () {
    $('.upperdiv').animate({
        'height': '65px'
    }, 300);
    $('.lowerdiv').animate({
        'height': '65px',
            'top': '30.4%'
    }, 300);
}, function () {
    $('.upperdiv').animate({
        'height': '0px'
    }, 300);
    $('.lowerdiv').animate({
        'height': '0px',
        'top': '54.4%'
    }, 300);
});

请在此处查看修改后的版本：http://jsfiddle.net/kj8yfney/1/

在jQuery悬停之后，div不会回来

2 个答案: