jquery - 创建一个 Jquery Fade 效果

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

但我无法锻炼如何将效果更改为翻转时的淡入和翻转时的淡出。我会放我的代码，但它很差而且不起作用。我可以对 CSS 进行排序以更改不透明度等。

Answer 1

尝试这个：

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

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

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

Answer 2

如果你想要一个简单的 mouseover mouseout 来淡入和淡出然后使用这种方式：

$('.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').hover(function(){
        $(".cover", this).stop().animate({
            opacity: 1
        })
    }, function() {
        $(".cover", this).stop().animate({
            opacity: 0.4
        });
    });
});