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

Question

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);
  });

both css left and bottom will be executed at the same time

Luminous_Dev
– Luminous_Dev

2017-03-05 07:28:58 +00:00
Commented Mar 5, 2017 at 7:28 — Luminous_Dev
– Luminous_Dev, Commented Mar 5, 2017 at 7:28

Rahul · Accepted Answer · 2017-03-05 07:33:16Z

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.

answered Mar 5, 2017 at 7:33

Rahul

18.6k7 gold badges43 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Espro Over a year ago

Oh God! I see! Thank you!

Rahul Over a year ago

Your most welcome! If your problem has been solved by my answer, you can accept my answer !

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related