Within the given code snippet, the .logo element is initially hidden. The goal is to make it visible upon scrolling, while simultaneously animating the movement of the <ul> element to the right (e.g., sliding). Upon reviewing the demo provided, one can observe that when the logo appears or disappears, the <ul> transitions in a rather abrupt manner. The desired outcome is to achieve a smoother animation for this transition.
How can this objective be accomplished?
HTML:
<div class="header">
<div class="logo"><img src="http://i.imgur.com/C0ZR4RK.png" /></div>
<ul class="list">
<li>Lorem ipsum</li>
<li>dolor sit amet</li>
<li>consectetur.</li>
</ul>
</div>
jQuery:
$(function() {
var shrinkHeader = 300;
$(".logo").hide();
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('.header').addClass('shrink');
$(".logo").fadeIn("slow");
} else {
$('.header').removeClass('shrink');
$(".logo").fadeOut("slow");
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});