CODEWITHSUNDEEP
javascriptjqueryfade
MrAxlee
MrAxlee

Reputation: 155

fadeOut then fadeIn sequentially

I'm trying to fade out one image, then fade in another image in the same spot.

So far I've got this fiddle, but you can see it changes the image before the .fadeOut() function finishes, when changing image via clicking thumbs. I've read that jQuery doesn't run sequentially as standard (which my code is assuming it does), so I tried adding in the completed function, like so:

$('#image').fadeOut('fast', function() {
    $('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '"><img src="' + image + '" class="image"/></a>');
    $('#image').fadeIn('fast');
});

However my issue is still present. What should I do to fix this?

Upvotes: 0

Views: 187

Answers (2)

guest271314
guest271314

Reputation: 1

Is expected result that #slider not fade to appearance of empty background during image transitions ?

Fades to either white, ready for the new image to fade in, or a crossfade - either would be acceptable

Try setting #slider width , height to expected img width, height; setting background-color to #000

css

#slider {
    width:500px;
    height:505px;
    background-color:#000;    
}

js

//clicking thumbnails
$(".image").click(function () {
    var image = $(this).attr("rel"); //getting the rel tag from the a tag
    var title = $(this).attr("data-title"); //data title from a tag
    $('#image').fadeOut('fast', function() { //fades out last image
    $('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '">'
    + '<img src="' + image + '" class="image"/></a>')
    .fadeIn('fast'); 
    })

jsfiddle http://jsfiddle.net/bmu43fm7/13/

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074148

I wouldn't destroy and recreate the elements; I'd just update the attributes. I'd also include a .stop(true, true) to cancel any previous animation and jump straight to the end before starting the fadeout, in case someone clicks quickly.

var images = [
  'https://i.sstatic.net/uClcV.jpg?s=328&g=1',
  'https://www.gravatar.com/avatar/d050da3cf82fdf6cfa431358fee9a397?s=128&d=identicon&r=PG&f=1',
  'https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=128&d=identicon&r=PG'
];
var current = 0;
updateImage(images[current], images[current]);

function updateImage(image, title) {
  var img = $('#image');
  img.stop(true, true).fadeOut('fast', function() {
    img.find('a').attr('href', image).attr('title', title);
    img.find('img').attr('src', image);
    img.fadeIn('fast');
  });
}

$("#next").click(function() {
  current = (current + 1) % images.length;
  updateImage(images[current], images[current]);
});
<input type="button" id="next" value="Next">
<div id="image">
  <a>
    <img style="height: 128px; width: 128px"><!-- Never do that, but for a demo, it's okay -->
  </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 3

Related Questions