CODEWITHSUNDEEP
jquerycssimage-gallery
Chris Lad
Chris Lad

Reputation: 349

Gallery - Images FadeIn/To JQuery

Hello I've been trying to fade images in and out of this gallery: 

$('#slides').fadeTo(3000, 0.0);

https://codepen.io/anon/pen/gwRXdK

The is alot of code so I don't want to spam it here just you can see it in the pen

I thought I had it working but I had no luck I would so like to stop it moving in from the right and just to have it fade in could anyone point me in the right direction please, thank you in advance

Upvotes: 1

Views: 45

Answers (2)

snecserc
snecserc

Reputation: 615

Check this codepen link. Removed:

//$('#slides').fadeTo(3000, 0.0);
//$('#slides').css('transform','translate3d(-'+$margin+'px,0px,0px)');

Upvotes: 0

poweroftheforce
poweroftheforce

Reputation: 36

Modified your code slightly here https://codepen.io/poweroftheforce/pen/PGjErq

If I understand correctly as to what you wish to accomplish, you want to perform the operation on the current slide

$("#slides li:nth-child("+$actualtarget+")")

rather than the container

$('#slides').

Thus I removed

$('#slides').fadeTo(3000, 0.0);

and changed / added

$("#slides li:nth-child("+$actualtarget+")").addClass('alive');

to

    $("#slides li:nth-    child("+$actualtarget+")").addClass('alive').css('opacity', '0').animate({
    opacity: 1
  }, 5000, function() {
    // Animation complete.
  });

so that in addition to setting the current or next available slide to class "alive", setting it's opacity to zero and animating it to opacity of 1 (fadeIn)

Hope this helps :)

Upvotes: 1

Related Questions