Why 2 css methods in jquery do not work one after another?

I need to remove borders and make them reappear after a bit, but 2 css methods do not work one after another somehow.

$(".item").click(function() {
    $(this).css({
      "border-left": "none",
      "border-bottom": "none"
    });

    var that = this;

    var returnBorder = window.setTimeout(function() {
      $(that).css({
        "border-left": "solid 3px #0086b3;",
        "border-bottom": "solid 3px #0086b3;"
      });
    }, 500);
  });

Answers 1

  • Check this,

    $(".item").click(function() {
        $(this).css({
          "border-left": "none",
          "border-bottom": "none"
        });
    
        var that = $(this);
    
        setTimeout(function() {
          $(that).css({
            "border-left": "solid 3px #0086b3",
            "border-bottom": "solid 3px #0086b3"
          });
        }, 2000);
      });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class='item' style='width: 100px; height:100px;display:block;border: solid 1px black'>
        test
        </div>

    Problem in your code is, you have given ; in applying css in js code, which js gives by default, so you dont need to give that.
    I have removed it from my code.

    Give it a try, this will work.


Related Articles