Question: How can i add a transition to this, so it slowly darkens within 1 sec? Atm the color change is instant:

```
$(function() {
    $('.navbar-toggle').on('click', function() {
        $('body').toggleClass('menu-open');
    })
});

```

css:

```
body.menu-open:after {
    content: '';
    display: block;
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0,0,0,0.7);

}

```

Answer: 
In order to transition the change, you will have to alter a transition-able property.

Your current code is creating a sudo element when the class is applied.

Instead, create the sudo element on body, and change its background and visibility when the class is added:

```js
$(function() {

  $('.show').on('click', function() {
        $('body').toggleClass('menu-open');
    });
});
```

```css
body:after{
     content: '';
    display: block;
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0,0,0,0.0);
    visibility:hidden;
    transition: background-color 1s;
}
body.menu-open:after{
      background-color: rgba(0,0,0,0.8);
      visibility:visible;
}
.show{
  display:inline-block;
  background-color:#ffffff;
  border:1px solid;
  padding:15px;
  position:relative;
  z-index:20;
  cursor:pointer;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div  class="show">Toggle</div>
```
You probably are looking to set a CSS rule for `transition` - see: <https://www.w3schools.com/Css/css3_transitions.asp>

A simple rule might be to add:

```
transition: all 1s;

```

Which will animate all animatable changes over the course of 1s.

To make sure that your fancy CSS features work with as many modern browsers as possible, you may also need to prefix them. Referring to caniuse.com or using a a site like <https://autoprefixer.github.io/> can be your friend to make sure your code is as widely compatible as possible.

Note that not every CSS property and value is animatable, so you may need to set a default value for the property for it to transition from.