為什么用jQuery更改img src無法正常工作？

Question

好吧，任務是單擊更改img src。

這樣做不是問題。 但是我想在更改它時產生一些效果。 因此，我使用了fadeOut和fadeIn。 問題是，當img src更改時，img開始“閃爍/閃爍”。

你可以在這里看到一個例子

http://www.coffee-cult.ru/slidersupreme （右上角的矩形激活滑塊按鈕）

和代碼，

$main_image = $("img").first();

$("#prev_slide").click(function(e) {
    e.preventDefault();
    $main_image.fadeOut(400, function() {
        $main_image.attr('src', images[0]);
    }).fadeIn(400);
});

$("#next_slide").click(function(e) {
    e.preventDefault();
    $main_image.fadeOut(400, function() {
        $main_image.attr('src', images[1]);
    }).fadeIn(400);
});

Answer 1

你可以嘗試使用

$(this).attr();

代替

 $main_image.attr();

Answer 2

它與頁面上的其他腳本有關。 在小提琴中，使用相同的代碼看起來還不錯： http : //jsfiddle.net/ewyLcm0s/

var images = ['http://lorempixel.com/100/100/people/1','http://lorempixel.com/100/100/people/2'],
$main_image = $("img").first();

$("#prev_slide").click(function(e) {
    e.preventDefault();
    $main_image.fadeOut(400, function() {
        $(this).attr('src', images[0]).fadeIn(400);
    });
});

$("#next_slide").click(function(e) {
    e.preventDefault();
    $main_image.fadeOut(400, function() {
        $(this).attr('src', images[1]).fadeIn(400);
    });
});