0

私は次のコードを持っています：

$homeSlider.mouseenter(function() {
    console.log('enter');
    $slideInfo.animate({
        'bottom': -slideInfoHeight + 'px'
    });
});
$homeSlider.mouseleave(function() {
    console.log('leave');
    $slideInfo.animate({
        'bottom': '0px'
    });
});
$slideInfo.mouseenter(function() {
    $homeSlider.unbind('mouseenter');
    $homeSlider.unbind('mouseleave');
});
$slideInfo.mouseleave(function() {
    $homeSlider.bind('mouseenter');
    $homeSlider.bind('mouseleave');
})

私のslideinfodivは、homeSliderdivの一部の上に絶対に配置されています。homeSliderをロールオーバーすると、slideInfoはそれ自体を非表示にし（-slideInfoHeight）、ロールアウトすると表示されます。slideInfo divの上にマウスを移動すると、適切に表示されたままになり、ロールアウトしても表示されたままになります。ただし、homeSliderをロールバックしても、slideInfoは非表示になりません。私は何が間違っているのですか？

4

1 に答える 1

0

連続的なバインドとバインド解除の代わりに変数を使用することをお勧めします。

var preventAnimation = false;
$homeSlider.mouseenter(function() {
    if (preventAnimation) return;
    console.log('enter');
    $slideInfo.animate({
        'bottom': -slideInfoHeight + 'px'
    });
});
$homeSlider.mouseleave(function() {
    if (preventAnimation) return;
    console.log('leave');
    $slideInfo.animate({
        'bottom': '0px'
    });
});
$slideInfo.mouseenter(function() {
    preventAnimation = true;
});
$slideInfo.mouseleave(function() {
    preventAnimation = false;
})

また、あなたは調べているかもしれません.hover()！

于 2012-07-28T15:42:50.950 に答える