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>
```
try this:

```
...{background-color: rgba(0,0,0,0.7);}
...{-webkit-transition: background-color 1s; /* Safari */
transition: background-color 1s;}

```

You probably need to define the background-color and the transition when the class is not present.