0

当悬停在其他 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()才能获得想要的效果，甚至有可能吗？

4

3 回答 3

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。

于 2013-09-12T17:26:49.343 回答
0

如果不使用旋转图像（而不是 css 背景），我不知道有什么方法可以做你想做的事，但是JQuery 颜色插件可能对你有用。

看这里的例子（点击 Demo），这里有一个教程。

于 2013-09-12T17:18:13.910 回答
0

该.slideDown()函数显示已隐藏的 div。http://api.jquery.com/slideDown/ slideUp 函数可能是您在隐藏 div 时要寻找的。如果你想用slideUp效果改变图像，你可以做的是把两个div放在一起，然后在要隐藏的那个上做一个slideUp。

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

于 2013-09-12T17:23:40.803 回答