CODEWITHSUNDEEP
javascriptjquerycss
COMisHARD
COMisHARD

Reputation: 923

Animate Add Border (grow then shrink)

I'm trying to build a little effect without using any plugins/libraries besides jquery. The goal is to make it so that when the user changes the value of a box, a border appears, grows to 8px and then shrinks back to 0px. Right now I have the following shell of a code:

$('#pastebox').on('input', function() {
    $("#pastebox").css("border", "solid 1px green");
});

I know that I can animate using something like the following, but I'm having trouble getting it to work:

$("#pastebox").animate({border-width: '5px'}, 1000);

I know that if I could get the previous to work, I could then do something like:

$('#pastebox').on('input', function() {
    $("#pastebox").css("border", "solid 1px green");
    $("#pastebox").animate({border-width: '5px'}, 1000);
    $("#pastebox").animate({border-width: '0px'}, 1000);
});

What am I doing wrong?

Upvotes: 0

Views: 273

Answers (1)

Shomz
Shomz

Reputation: 37711

Object keys cannot contain a minus sign (border-width) - either camelCase it, or quote it:

$('#pastebox').on('input', function() {
    $("#pastebox").css("border", "solid 1px green");
    $("#pastebox").animate({"border-width": '5px'}, 1000);
    $("#pastebox").animate({"border-width": '0px'}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="pastebox" />

Console is always helpful.

Upvotes: 2

Related Questions