Saya mencoba kode saya tetapi tidak berfungsi, silakan periksa kode berikut:

<!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>
1
Umair Iftikhar 15 Agustus 2017, 08:55

2 jawaban

Jawaban Terbaik

Itu karena properti position dari elemen p adalah statis dan left tidak akan berfungsi pada elemen statis - ubahlah untuk mengatakan relative dan berhasil - lihat demo di bawah:

$(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>
2
kukkuz 15 Agustus 2017, 05:58

Tambahkan position: relative dan animasi Anda akan berfungsi dengan baik.

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>
2
Carsten Løvbo Andersen 15 Agustus 2017, 05:56