Why changing img src with jQuery works incorrectly?

Question

Well, the task is to change img src on click.

It was not a problem to do it. But I'd like to have some effect while changing it. So, I used fadeOut and fadeIn. Problem is when the img src is changing the img starts "sparkling / blinking".

You can see an example here

http://www.coffee-cult.ru/slidersupreme (rectangle in top right corner activates slider buttons)

and the code,

$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

you can try to use

$(this).attr();

instead of

 $main_image.attr();

Answer 2

It has something to do with your other scripts on the page. Here in the fiddle it looks kind of alright with the same code: 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);
    });
});