Question

我正在调整一个插件，我必须将它从滑动效果改为淡入淡出。

在翻转时，它会将标题div滑入视图。我需要做到这一点，所以这会逐渐消失，我被困住了（我很遗憾，我不是JS程序员，通常可以调整。但我被困了）

旧的JS代码如下所示，并将div提高了106pxs。

$(document).ready(function(){
            $('.boxgrid.caption').hover(function(){
                $(".cover", this).stop().animate({top:'15px'},{queue:false,duration:160});
            }, function() {
                $(".cover", this).stop().animate({top:'106px'},{queue:false,duration:160});
            });
        });

但我无法锻炼如何在翻滚时将效果更改为fadeIn和翻转时fadeOut。我会把我的代码，但它是如此糟糕，无法工作。我可以将CSS排序以改变不透明度等。

Answer 1

$(document).ready(function(){
    $('.boxgrid.caption').hover(function(){
        $(".cover", this).stop().animate({
            opacity: 1
        })
    }, function() {
        $(".cover", this).stop().animate({
            opacity: 0.4
        });
    });
});

Answer 2

如果你想要一个简单的mouseover mouseout到fadein和fadeout，那么使用这种方式：

$('.boxgrid.caption').hover(function(){
    $(".cover", this).stop().animate({opacity:'1'},{queue:false,duration:160});
}, function() {
    $(".cover", this).stop().animate({opacity:'0'},{queue:false,duration:160});
});

Answer 3

试试这个：

$(document).ready(function(){
    $('.boxgrid.caption').on('mouseover',function(){
        $(".cover", this).fadeIn();
    }).on('mouseout',function() {
        $(".cover", this).fadeOut();
    });
});

阅读mouserover和mouseout http://api.jquery.com/mouseover/ 和http://api.jquery.com/mouseout/

同样适用于fadeIn和fadeOut http://api.jquery.com/fadeIn/和http://api.jquery.com/fadeOut/

创建Jquery淡化效果

3 个答案: