Search code examples
javascriptjqueryfadein

Makes jquery fadein smoother

Is it me or before fading-in from invisible to visible the elements get fully visible during a fraction of a second? This is particularly visible if I set a fadein of '50000' instead of "slow" for instance. It's visible 1 second then invisible, then slowly getting visible again. Is there a way to avoid that and don't make the elements visible before the fadein starts? Should I do it in CSS maybe? Tks

 <script type="text/javascript">
$(function() {
         $('.wrapcircles').waypoint(function() {
         $(".circle-1").delay(100).fadeIn("slow");
         $(".circle-2").delay(1000).fadeIn("slow");
         $(".circle-3").delay(1500).fadeIn("slow");
         $(".circle-4").delay(100).fadeIn("slow");
         $(".circle-5").delay(1000).fadeIn("slow");
         $(".circle-6").delay(1500).fadeIn("slow");
         }, {
           offset: '100%'
         });
    });
</script>
Solution

  • Well, you have a delay before you begin your fadeIn, and if the elements aren't set as invisible before that, they will be visible, as you would expect. Try setting display: none; on them in CSS, and they'll be invisible until fadein.