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()以获得deisred效果，甚至可能？

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;    
}

这是一个小提琴：http://jsfiddle.net/yvsK4/2/

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

Answer 2

我不知道如何在不使用旋转图像（而不是css背景）的情况下做任何你想要的事情，但JQuery color plugin可能对你有用。

查看示例here（点击演示）和tutorial here。

Answer 3

.slideDown()函数显示已隐藏的div。 http://api.jquery.com/slideDown/ slideUp函数可能是您在隐藏div时要查找的内容。如果您想使用slideUp效果更改图像，您可以做的是将两个div相互叠加，并在要隐藏的一个上执行一个slideUp。

我更新了小提琴来说明这一点：http://jsfiddle.net/yvsK4/1/

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

3 个答案: