爲圖像不透明度動畫創建jquery函數不起作用

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開發人員工具不會返回任何錯誤，但它不起作用。請幫我出爲圖像不透明度動畫創建jquery函數不起作用

來源

2013-09-24 Tamás

你調用'op_fadein'，並在同一時間.hover'op_fadeout'（）。由於動畫時間相等，它們會相互衝突。可以設置延遲或創建一個函數，在第一個動畫完成回調後執行第二個動畫（請參閱jQuery動畫文檔）。 –

我認爲.hover（）接受兩個函數：第一個用於鼠標位於特定元素上，第二個用於鼠標不再位於該元素上時。 –

你需要創建一個包裝函數：並通過this：（另外我想ü SE 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

enter image description here

來源

2013-09-24 08:43:45

葉普，它現在的作品。非常感謝你：） –

線穿過this到這樣的功能，如果「IMG」不是直系後裔使用.find（）代替孩子（）的

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

來源

2013-09-24 08:38:13 Anton

爲圖像不透明度動畫創建jquery函數不起作用

回答

相關問題