I have a website that I want the logo to change based on scroll height. I also want it to fade in/out between the two logos. I am new to Javascript and jQuery but I have this code working minus the animation:

```
jQuery(window).scroll(function () {
    if (jQuery(window).scrollTop() > 400) {
        $(".logo-main").attr("src","IMAGEURL1")
    } else {
         $(".logo-main").attr("src","IMAGEURL2")
    }
 });

```

The logo changes on scroll perfectly. But I want it to fade from the old logo to the new one. I tried this:

```
jQuery(window).scroll(function () {
    if (jQuery(window).scrollTop() > 400) {
        $(".logo-main").fadeIn().attr("src","IMAGEURL1")
    } else {
         $(".logo-main").fadeOut().attr("src","IMAGEURL2")
    }
});

```

But that causes the "top" logo (the one in the `else`) to fade out before the other logo is ready. It also doesn't come back when you scroll back to the top.

Basically right now it changes to the right image, but it just jumps to it. I want it to fade from one to the other.

P.S. This is in WordPress so I can't control the HTML structure of the logo. That's why I am using `.attr()`.