jquery - 将鼠标悬停在链接上时使用 slideDown 效果更改 div 的背景

Question

当悬停在其他 div 中的链接上时，我正在使用 jquery 更改透明 div 的背景(这里是 Jsfiddle)。这是代码:

$(".trigger2").hover(function (){
    var hoverClass = $(this).attr('id');
    $(".trigger2").removeClass('active');
    $(this).addClass('active');
    $("#background").removeClass().addClass(hoverClass);
 },
 function (){  
     $("#background").removeClass().addClass(hoverClass);
 });

我希望背景图像随着向下滑动效果而变化。我尝试将 .slideDown() 附加到代码的不同部分，但没有任何反应。

我应该如何实现 .slideDown() 才能达到预期的效果，甚至可能吗？

Answer 1

-- JS--

$(".trigger2").hover(function (){
    var hoverClass = $(this).attr('id');
    $(".trigger2").removeClass('active');
    $(this).addClass('active');

    //slideDown the background element after updating its class to change the bg image
    $("#background").removeClass().addClass(hoverClass).slideDown(500);
},
function (){  

    //notice you need to get the ID again since the last time was in a different scope not accessible from here
    var hoverClass = $(this).attr('id');

    //start by sliding Up the element
    $("#background").slideUp(500, function () {
         $(this).removeClass().addClass(hoverClass)
     });
});

-- CSS--

/*Notice I added "display:none", this will allow slideDown to function properly the first time its called*/
#background {
    display:none;
    height: 200px;
    width: 400px;
    background-image: none;
    position: absolute;
    top:0;
    left:200px;    
}

这是一个 fiddle :http://jsfiddle.net/yvsK4/2/

此外，如果您想使用淡入淡出动画，您应该能够将 slideDown/slideUp 替换为 fadeIn/fadeOut.