how to add a CSS attribute just for specific time via JQuery (revert back to normal after 2 sec)

Question

I want to set a CSS attribute for a element (div) just for 2 sec. here is my try:

html:

<div class="div">foo</div>
<input class="btn" type="button" value="click" />

jquery:

$(".btn").click(function(e) {
   $(".div").css({"border": "1px solid #ccc"});
});

But the above code will be applied for ever, how can I limit it for a specific period ?

score 3 · Answer 1 · answered Aug 06 '15 at 09:04

3

I think you could use something like this :

$(".btn").click(function(e) {
    $(".div").css({"border": "1px solid #ccc"});
    setTimeout(function(){
        $(".div").css({/* Your initial css */});
    }, 2000);
});

answered Aug 06 '15 at 09:04

Mteuahasan

491
2
10

Vanojx1 · Accepted Answer · 2015-08-06T09:33:43.897

I think using css class maybe the best solution just because i don't know the prev border style or the others css rules applied to the element:

css

.borderStyle{
    border: 1px solid #ccc!important;
}

js

$('.btn').click(function(){
    $('.div').addClass("borderStyle");
    setTimeout(function(){ $('.div').removeClass("borderStyle"); }, 2000);
});

toggle class version

$('.btn').click(function(){
    $('.div').toggleClass("borderStyle");
    setTimeout(function(){ $('.div').toggleClass("borderStyle"); }, 2000);
});

fiddle

don't know why the toggleclass don't work for you but lets keep it shown in my answer for future reviews

score 2 · Answer 3 · edited May 23 '17 at 12:14

Pretty simple, add a setTimeout() and let that run after 2 seconds and let it remove the border.

$(".btn").on("click", function() {
    $('.foo').css('border', '1px solid #ccc');
    setTimeout( function() { 
        $('.foo').css('border', 'none');
    }, 2000);
});

Working JSFIDDLE

As you can see, I have replaced your .click() with .on(). Read here why it's better to use .on() and here how you use it.

Akul Von Itram · Answer 4 · 2015-08-06T09:12:09.827

1

After two seconds to remove css atribute:

$(".btn").click(function(e) {
   $(".div").css({"border": "1px solid #ccc"});
   setTimeout(function() { 
       $(".div").css({
           'border' : 'none',
           'width' : '30px',
           'top' : '10px',
           'left' : '30px',
           'bottom' : '10px',
           'right' : '30px'
       });
   }, 2000);
});

edited Aug 06 '15 at 09:12

answered Aug 06 '15 at 09:04

Akul Von Itram

1,428
2
20
31

there is not just `border`, there is 6 attribute. I can not set them `none` again. – Shafizadeh Aug 06 '15 at 09:06
@Sajad here is solution with 6 random attributes, change them to 6 that suite you. – Akul Von Itram Aug 06 '15 at 09:14
worked, +1 voteup for you. but I think there is a more optimized approach. – Shafizadeh Aug 06 '15 at 09:19
You can do it with class in css, so you will write less javascript, but more css. – Akul Von Itram Aug 06 '15 at 09:21
yea, I want that way. and I did it, but I don't know why the class just `add` and don't `remove` – Shafizadeh Aug 06 '15 at 09:23

how to add a CSS attribute just for specific time via JQuery (revert back to normal after 2 sec)

4 Answers4