# How to fade in and out an element

**URL:** <https://forums.fusetools.com/t/how-to-fade-in-and-out-an-element/1868>\
**Category:** How-to Discussions\
**Created:** [January 21, 2016, 8:30am UTC](https://forums.fusetools.com/t/how-to-fade-in-and-out-an-element/1868 "2016-01-21T08:30:07Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Simo\_Santavirta](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/simo_santavirta/32/175_2.png) [@Simo\_Santavirta](https://forums.fusetools.com/u/Simo_Santavirta)\
**Post date:** [January 21, 2016, 8:30am UTC](https://forums.fusetools.com/t/how-to-fade-in-and-out-an-element/1868/1 "2016-01-21T08:30:07Z")

</div>

I would like to fade in a view when something happens and then fade it out after few seconds, but am struggling to get this to work.

Some of the many things I’ve tried:

```auto
<Panel ux:Name="MyElement" Opacity="0">
  <WhileEnabled>
      <Change Target="MyElement.Opacity" Value="1" Duration=".5f" />
      <Change MyElement.IsEnabled="false" Delay="1" />
  </WhileEnabled>
  <WhileDisabled>
      <Change Target="MyElement.Opacity" Value="0" Duration=".5f" />
  </WhileDisabled>
 </Panel>

```

With

```auto
// that something happens:
MyElement.IsEnabled = true;

```

Also tried:

```auto
<Panel ux:Name="MyElement" Visibility="Collapsed">
  <WhileVisible>
      <Change Target="MyElement.Opacity" Value="1" Duration=".5f" />
      <Change Target="MyElement.Opacity" Value="0" Duration="1" Delay="1" />
      <Change MyElement.Visiblity="Collapsed" Delay="2" />
  </WhileVisible>
 </Panel>

```

With

```auto
// that something happens:
MyElement.Visibility = Fuse.Elements.Visibility.Visible;

```

But these don’t work. It fades in nicely, but then fades down for about 50% and either start flickering or just stops there.

---

<div class="post-metadata">

**Author:** ![jveres](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jveres/32/545_2.png) [@jveres](https://forums.fusetools.com/u/jveres)\
**Post date:** [January 21, 2016, 10:11am UTC](https://forums.fusetools.com/t/how-to-fade-in-and-out-an-element/1868/2 "2016-01-21T10:11:12Z")

</div>

```auto
<App Theme="Basic">
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var somethingHappens = Observable(false);
        function makeItHappen() {
            somethingHappens.value = true;
            somethingHappens.value = false;
        }
        setTimeout(makeItHappen, 1000);
        module.exports = { somethingHappens: somethingHappens};
    </JavaScript>
    <Panel ux:Name="MyElement" Opacity="0" Background="#aaa">
        <WhileTrue ux:Name="fadeInAndOut">
            <Change Target="MyElement.Opacity" Value="1" Duration="0.3" DelayBack="2" Easing="CircularInOut" />
        </WhileTrue>
        <WhileTrue Value="{somethingHappens}">
            <Pulse Target="fadeInAndOut" />
        </WhileTrue>
    </Panel>
</App>

```

Probably something like this?