I have logo1 in the header changing to logo2 when user scrolls down. However, I don't want the logos to instantly switch but rather the first logo gradually fade out as the second logo fades in. I have added .fadeIn(slow) and .fadeOut(slow) in various places in my js but it's had no effect. Hoping I can get some help with this.
I've updated my question with more code. I've had 2 answers but can't get either to work for me and no more responses. Hoping an edited question with more detail will get a bit more attention.
<header>
<div id="nav" class="navbar">
<div id="nav_left">
<a href="index.html">HOME</a>
<a href="services.html">SERVICES</a>
<a href="portfolio.html">PORTFOLIO</a>
</div>
<a href="index.html" id="logo" class="Claire_logo">
<img src="images/logo_6_small.png" alt="logo2" id="logo_Claire" class="logo_main"
style="display:none" />
<img src="images/logo_bluebird_90_cc.png" alt="logo1" id="logo_Claire_blue" class="logo" />
</a>
<div id="nav_right">
<a href="blog.html">BLOG</a>
<a href="about.html">ABOUT</a>
<a href="contact.html">GET IN TOUCH</a>
</div>
</div>
</header>
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$(".navbar").addClass("navbar-scroll");
$(".logo").show();
} else {
$(".navbar").removeClass("navbar-scroll");
$(".logo").hide();
}
if (scroll > 120) {
// $(".navbar").addClass("nav-color");
$(".logo_main").show();
$(".logo").hide();
} else {
// $(".navbar").removeClass("nav-color");
$(".logo_main").hide();
$(".logo").show();
}
});
});
replaceWith
method in jQuery. I have posted a demo of working snippet for the same – Sai Manoj Jul 7 '19 at 9:52