javascript - 为图像不透明动画创建 jquery 函数不起作用

Question

function color_fadein(element,val1){
    $(this).children(element).stop().animate({
    opacity: val1,
    }, 200);
}

function color_fadeout(element,val2){
    $(this).children(element).stop().animate({
    opacity: val2,
    }, 200);
}

$('.post').hover(color_fadein('img','0.5'),color_fadeout('img', '1'));

为什么这不起作用？chrome 开发者工具不会返回任何错误，但它不起作用。请帮帮我

Answer 1

this如果 'img' 不是直接后代使用 .find() 而不是 children() 则传递到这样的函数

function op_fadein(that, element, val1) {
    $(that).children(element).stop().animate({
        opacity: val1,
    }, 200);
}

function op_fadeout(that, element, val2) {
    $(that).children(element).stop().animate({
        opacity: val2,
    }, 200);
}

像这样添加function(){}悬停

$('.post').hover(function () {
    op_fadein(this, 'img', '0.5')
}, function () {
    op_fadeout(this, 'img', '1')
});

演示

Answer 2

您需要创建一个包装函数：并传递this：（我也会使用find而不是 children因此它寻求更深）

function op_fadein(t,element,val1){

    $(t).find(element).stop().animate({
    opacity: val1,
    }, 200);
}

function op_fadeout(t,element,val2){

    $(t).find(element).stop().animate({
    opacity: val2,
    }, 200);
}

$('.post').hover(function (){op_fadein(this,'img','0.5')},function (){op_fadeout(this,'img', '1')});

http://jsbin.com/OgOdak/1/edit