title: Vue.js: attempting to fadeOut() one image and fadeIn() another
body: <p>This working bit of code (assuming foo/foo_ad1.jpg thru foo/foo_ad11.jpg is loaded on server) loads a random picture from a bank of pictures, and replaces it with another picture every few seconds.</p>
  
  <p>I'm trying to get the pictures to gracefully fade in and out, and that's where I'm running into two issues:</p>
  
  <p>1) I can't get 'this.image' to display when I move it into the setTimeOut function.</p>
  
  <p>2) I wasn't able to get the fadeIn() or fadeOut() working, I'm not even sure what the correct syntax would be.</p>
  
  <p>Please see the comments added in the code. TY</p>
  
  <p>JS:</p>
  
  <pre><code>Vue.component('foo-ad-module', {
      data() {
          return {
              image:  'foo/foo_ad1.jpg',
              timer:  '',
              x:          0
          }
      },
      created: function() {
          this.replaceImage();
          this.timer = setInterval(this.replaceImage, parseInt((Math.random() * 33599)%30000) + 5000)
      },  
      methods: {
          init(){
              this.x = parseInt((Math.random() * 33599)%11) + 1;
                this.image = 'foo/foo_ad' + this.x + '.jpg';
                console.info("this.image = " + this.image);
         },
         replaceImage: function() {
              this.x = parseInt((Math.random() * 33599)%11) + 1;
  //#if
             this.image = 'foo/foo_ad' + this.x + '.jpg';     // ...THIS WORKS (when it is outside the setTimeout())
  //#else
  //          $(???).fadeOut("2000");                                     // ... intending to put a fadeOut() here...
              setTimeout(function () {        
                  console.info("this is working...");                                                          
  //              this.image = 'foo/foo_ad' + this.x + '.jpg';    // ... THIS DOESN'T WORK (when it is inside the setTimeout())
  //              $(???).fadeIn("2000");                                  //  ... intending to put a fadeIn() here...                                         
              }, 2000);
  //#endif            
  
              clearInterval(this.timer)         
          this.timer = setInterval(this.replaceImage, (parseInt((Math.random() * 33599)%30000) + 5000));        
         },
    },
      beforeDestroy() {
        clearInterval(this.timer)
      },  
      mounted(){
          this.init()
      },  
      template: `
                  &lt;div class="foo-ad-module " &gt;
                 &lt;img :src="image" alt="hi there"&gt;
                  &lt;/div&gt;  `
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.foo-ad-module {
      width:          198px;
      height:         198px;
      border:         1px solid #555;     
      border-radius:  10px;
      margin-bottom:  10px;
  }
  </code></pre>