为图像不透明度动画创建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

如果'img'不是直接后代使用.find（）而不是children（）

，请将this传递到此函数中

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

DEMO

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