12

Bootstrap obviously makes use of the 'hide', 'fade' and 'in' classes for its transitions.

The problem I'm having is that using 'fade' and 'in' will change the opacity from 0 to 1. The transition effect is perfect, but the content is still there taking up space on the page, even if you can't see it. For example, if it's container has a border, there'll be a big white space before the border.

I want to make use of their exisiting CSS transitions by adding and removing the 'in' class, but I also want whatever element that's fading out, to be hidden, but only after the transition is over. So basically, exactly what they do in the modal, but I don't know how they do it.

In my example below, adding or remove the hide means the div appears or disappears instantly, before the fade effect can happen.

JS fiddle here

Example HTML:

<div class="control-group">
    <label class="control-label">Choose one:</label>
    <div class="controls">
        <label class="radio inline">
            <input type="radio" name="color-radio" id="yellow-trigger" value="yellow" />Yellow Box</label>
        <label class="radio inline">
            <input type="radio" name="color-radio" id="red-trigger" value="red" />Red Box</label>
    </div>
</div>
<div id="yellow-box" class="hide fade">
    <p>I'm yellow</p>
</div>
<div id="red-box" class="hide fade">
    <p>I'm red</p>
</div>

Example JS:

$(document).ready(function () {
    $('#yellow-trigger').click(function () {
        $('#yellow-box').addClass('in').removeClass('hide');
        $('#red-box').addClass('hide').removeClass('in');
    });

    $('#red-trigger').click(function () {
        $('#red-box').addClass('in').removeClass('hide');
        $('#yellow-box').addClass('hide').removeClass('in');
    });
});
davidpauljunior
  • 8,238
  • 6
  • 30
  • 54
  • may be try a time out like http://stackoverflow.com/a/13257654/1596547 see also http://bootply.com/62589 – Bass Jobsen May 30 '13 at 10:21
  • I used timeout in the end, thanks. – davidpauljunior Jun 03 '13 at 00:48
  • You can do this [without Javascript or Jquery now](https://stackoverflow.com/questions/11679567/using-css-for-a-fade-in-effect-on-page-load) – Liam Oct 30 '21 at 18:59
  • Does this answer your question? [Using CSS for a fade-in effect on page load](https://stackoverflow.com/questions/11679567/using-css-for-a-fade-in-effect-on-page-load) – Liam Oct 30 '21 at 19:00

2 Answers2

14

Any reason not to just use jQuery for the fadeIn effect? Below is some code to make the fade in effect with jQuery.

Fiddle here

Removed "fade" class

<div id="yellow-box" class="hide">
<p>I'm yellow</p> </div>

Updated jQuery for fade in

$(document).ready(function () {

  $('#yellow-trigger').click(function () {
      $('#red-box').hide();
      $('#yellow-box').fadeIn('slow');
  });

  $('#red-trigger').click(function () {
      $('#yellow-box').hide();
      $('#red-box').fadeIn('slow');     
  });

});
Yevgeniy Afanasyev
  • 37,872
  • 26
  • 173
  • 191
Zane
  • 532
  • 1
  • 5
  • 15
  • In modern browsers (as of... at least 2020), this is not the best way to achieve this. Pure CSS transitions, as in the answer @maarten-von-middelaar – Jay Day Zee Apr 13 '23 at 08:30
8

This is very old, but in case anyone else gets here, the answer is to use a single-shot handler for the synthetic event bsTransitionEnd.

example:

$(".alert").one('bsTransitionEnd',function() {
    $(this).addClass('hide');
});
window.setTimeout(function(){
    $(".alert").removeClass('in');
},1000);
Maarten van Middelaar
  • 1,691
  • 10
  • 15
Seth Kingsley
  • 452
  • 4
  • 5