0

I'm pretty new to code and programming, but I'm playing around to learn some tools for web development. I've tried to make a bootstrap carousel trigger a change in text beside it and succeeded (see code below). But I also want it to have the same transition property as the carousel, which is a 1.5s fade out and in. However, I can only make the div (with the different text) appear and disappear instantaneously. If I add any jQuery fade() or slide() it will act as if I'm pressing a link to the carousel-ID.

This is the code I have for triggering hide/show for the div. I began with just the top part of the script, but played around with the second to see if I could get a different result. 

$("#carouselExampleIndicators").on('slide.bs.carousel', function(event){
    let image = (event.to);
    if (image == 1)  {
      $("#header-1").hide();
      $("#header-3").hide();
    }
    else if (image == 2)  {
      $("#header-1").hide();
      $("#header-2").hide();
    }
    else {
      $("#header-2").hide();
      $("#header-3").hide();
    }
  });
$("#carouselExampleIndicators").on('slid.bs.carousel', function(event){
    let image = (event.to);
    if (image == 1)  {
      $("#header-2").show();
    }
    else if (image == 2)  {
      $("#header-3").show();
    }
    else {
      $("#header-1").show();
    }
  });
</script>

Any tips?

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
André Krosby
  • 1,008
  • 7
  • 18
  • 1
    `.fadeIn` and `.fadeOut` – Justinas May 18 '20 at 12:55
  • Does this answer your question? [jQuery - Animate then hide](https://stackoverflow.com/questions/31696175/jquery-animate-then-hide) – Justinas May 18 '20 at 12:56
  • Question is a little confusing, please clarify what you want to happen and what happens with your code and why it's not what you want. At the moment you have "*have the same transition*" / "*if I add fade() it acts as if I'm pressing a link*" – freedomn-m May 18 '20 at 13:03
  • [`show` has an overload that takes a duration and a callback that fires when complete](https://api.jquery.com/show/#show-duration-complete). The jQuery API documentation is actually pretty good... – Heretic Monkey May 18 '20 at 13:03
  • This is how it looks on jsfiddle: https://jsfiddle.net/2p78eo4s/ I want the text to have the same transition (fade) as the carousel. However, if I add .fade() it won't work as intended. – André Krosby May 18 '20 at 13:28

1 Answers1

0

I tried another link for the jQuery and that seems to have resolved the issue :)!

Edit: Previous jQuery: https://code.jquery.com/jquery-3.3.1.slim.min.js New and working jQuery: https://code.jquery.com/jquery-3.5.1.js

The script now looks like this and works smoothly.

$("#carouselExampleIndicators").on('slide.bs.carousel', function(event){
let image = (event.to);
if (image == 1)  {
  $("#header-1").fadeOut(500, function() {
  $("#header-2").fadeIn(500);
  });
  $("#header-3").hide();
}
else if (image == 2)  {
  $("#header-1").hide();
  $("#header-2").fadeOut(500, function() {
  $("#header-3").fadeIn(500);
  });
}
else {
  $("#header-2").hide()
  $("#header-3").fadeOut(500, function() {
  $("#header-1").fadeIn(500);
  });
}

});

André Krosby
  • 1,008
  • 7
  • 18
  • Can you post the link you used and a short code snippet that shows what worked please? This will allow this question/answer to be helpful to future visitors who may have the same problem. – War10ck May 18 '20 at 15:29