爲什麼用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); 
    }); 
});