How do I remove fadeIn?

Question

I'm working on a simple landing page. I have a jquery file but i dont really know how to hide the fade. I mean i just want to animate the 5 image without fade. What do u think where is the probelm ?

http://yourjavascript.com/13873144111/jquery.js - jquery

$(document).ready(function() {
        $(".start").click(function() {
            $.when($('.start2').fadeIn(2000)).done(function() {
                $.when($('.start3').fadeIn(2000)).done(function() {
                    $.when($('.start4').fadeIn(2000)).done(function() {
                        $.when($('.start5').fadeIn(3000)).done(function() {
                            $(".start").hide();
                            setTimeout(function()
                            {
                                $(".start").fadeIn(2000);
                                $(".start2, .start3, .start4, .start5").hide();
                            }, 3000);
                        });
                    });
                });
            });
        });
   });

Answer 1

Well, there's something you don't understand, you're actually using the fadeIn animation, so to 'Hide' it, like you asked you have to actually not use it. If you want the stuffs to appear with no fading, you can either use slideDown , your own .animate to create custom animation or show instead of fadeIn .

So to simply use slideDown , you would do this.

<script type="text/javascript">
   $(document).ready(function()
   {
        $(".start").click(function()
        {
            $.when($('.start2').slideDown(2000)).done(function() {
                $.when($('.start3').slideDown(2000)).done(function() {
                    $.when($('.start4').slideDown(2000)).done(function() {
                        $.when($('.start5').slideDown(3000)).done(function() {
                            $(".start").hide();
                            setTimeout(function()
                            {
                                $(".start").slideDown(2000);
                                $(".start2, .start3, .start4, .start5").hide();
                            }, 3000);
                        });
                    });
                });
            });
        });

   });


  </script>

And maybe use slideUp instead of hide