Jquery animation không chạy trên sublime 3

k12k12pro · December 15, 2015, 4:33am

mình đang học code trên freecodecamp có đoạn code thế này

$(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "green");
    $("#left-well").children().css("color", "green");
    $(".target:nth-child(2)").addClass("animated bounce");
    $(".target:even").addClass("animated shake");
    $("body").addClass("animated hinge");
  });
</script>
<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

khi mình học trên ấy thì viết code không cần import jquery hay bs3, nhưng khi mình viết lại trên sublime test mình có import bs3-cdn và jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
nhưng không hiểu sao mấy cái animation không thấy chạy

vhnam · December 14, 2015, 8:01am

Sublime Text chỉ là cái trình soạn thảo thôi, có thể được animation gì đâu ta?

Đoạn code của bạn đặt sai thứ tự nên nó không chạy đó. Bạn đem đoạn trong thẻ <script> đặt phía dưới phần khai báo jQuery, Bootstrap thử coi chạy được không?

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    </head>
    <body>

    <!-- TODO -->

    <script src="//code.jquery.com/jquery.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#target1").css("color", "red");
            $("#target1").prop("disabled", true);
            $("#target4").remove();
            $("#target2").appendTo("#right-well");
            $("#target5").clone().appendTo("#left-well");
            $("#target1").parent().css("background-color", "red");
            $("#right-well").children().css("color", "green");
            $("#left-well").children().css("color", "green");
            $(".target:nth-child(2)").addClass("animated bounce");
            $(".target:even").addClass("animated shake");
            $("body").addClass("animated hinge");
        });
    </script>
    </body>
</html>

Bạn không cần import là đúng vì nó đã import sẵn giùm bạn rồi

k12k12pro · December 14, 2015, 2:39pm

mình bỏ mấy cái khai báo lên trên cùng hết vẫn không có hiệu ứng gì cả

Tuan_Tran_Duong · December 14, 2015, 3:44pm

Bạn phải để jquery lên trên cái file.js kia mới được bạn (Mình cũng dùng sublime text 3)

vhnam · December 14, 2015, 3:54pm

Bạn có thể cho mình coi toàn bộ source code được không?

k12k12pro · December 14, 2015, 5:23pm

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "green");
    $("#left-well").children().css("color", "green");
    $(".target:nth-child(2)").addClass("animated bounce");
    $(".target:even").addClass("animated shake");
    $("body").addClass("animated hinge");
  });
</script>
<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

đây, mình khai báo bs3 và jquery và chạy trên localhost của python, bs3 thì bình thường còn jquery thì các class animated bounce hay shake không thấy hoạt động

k12k12pro · December 14, 2015, 5:24pm

không hiểu ý bạn lắm ?

greentrees · December 14, 2015, 11:51pm

Bạn hãy thử bỏ thêm protocol “https” (nếu ko đc thì “http”) vào 2 url dùng để load jquery từ trang jquery.com thử xem.

script scr=“https://code.jquery.com…” type=“text/javascript”>

Nguyên nhân có thể là do bạn đang chạy trên localhost nhưng lại viết tắt (như trên file bạn đưa) nên rất có thể localhost tự động thêm protocol là “file” vào mà không phải là “http” (hoặc “https”). Hy vọng giúp đc bạn.

k12k12pro · December 15, 2015, 4:33am

không được bạn ơi, mình search thì hình như phải down source code từ trang này http://jackonthe.net/css3animateit/examples/ rồi nhúng vô. Trên trang freecodecamp chắc có khai báo sẵn rồi nên chạy được

Vong_Hoang_Tuong · December 18, 2015, 6:46am

Thiếu animate.css