CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jermayne williams
jermayne williams

Reputation: 364

jquery animate (slideing right)

I'm trying to make a button expand by sliding right slowly using jquery to reveal content, but I can't get it to work. Also, I have no console errors

$( document ).ready(function() {
      $('.btn').on('click', () => {
        $('.contact').animate({'display': 'block'}, 500);
      });
    });
.btn{
      color: black;
      background: white;
      border: 1px solid black;
    }
.contact{
  display:none;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<a href='#' class='btn'> click here <span class="contact"> slide out </span></a>
</body>
<

Upvotes: 0

Views: 38

Answers (1)

Creative Div
Creative Div

Reputation: 443

Yes, You can achieve this through width toggle.

$(".contact").animate({width:'toggle'},350);

TO prevent the text to break on two lines, you can use a quick CSS to stop breaking the text to the next line.

white-space:nowrap;

Now we will hide the text until it is fully expanded. Just add a visibility:hidden to span.

Now, through jquery, we will visible the text after a delay using setTimeout function.

 setTimeout(function(){ 
       $(".contact").css("visibility","visible");
        }, 350);


$( document ).ready(function() {
      $('.btn').on('click', () => {
      
        $(".contact").animate({width:'toggle'},350);
        
        setTimeout(function(){ 
       $(".contact").css("visibility","visible");
        }, 350);
        
  
        
      });
    });
.btn{
      color: black;
      background: white;
      border: 1px solid black;
    }
.contact{
  display:none;
  visibility:hidden;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<a href='#' class='btn'> click here <span class="contact"> slide out </span></a>
</body>
<

Upvotes: 1

Related Questions