CODEWITHSUNDEEP
javascriptjquerycsshtml
Umair Iftikhar
Umair Iftikhar

Reputation: 468

Jquery animate is not working

I try my code but it is not working please check the following code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <button>Click me</button>
  <p style="width: 90px; background-color: #40FF08">This is a test peragraph</p>
</body>

</html>
<script>
  $(document).ready(function() {
    $("button").click(function() {
      $("p").animate({
        left: '400px'
      });
    });
  });
</script>

Upvotes: 2

Views: 4743

Answers (2)

kukkuz
kukkuz

Reputation: 42352

That is because the position property of the p element is static and left won't work on static elements - change it to say relative and it works - see demo below:

$(document).ready(function() {
  $("button").click(function() {
    $("p").animate({
      left: '400px'
    });
  });
});
p {
  width: 90px;
  background-color: #40FF08;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button>Click me</button>
<p>This is a test peragraph</p>

Upvotes: 2

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

Add position: relative and your animation will work just fine.

p {
  width: 90px;
  background-color: #40FF08;
  position: relative; <-- like this
}


$(document).ready(function() {
  $("button").click(function() {
    $("p").animate({
      left: '400px'
    });
  });
});
p{
width: 90px;
background-color: #40FF08;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<p>This is a test peragraph</p>

Upvotes: 2

Related Questions