jquery animate() toggle without hiding the element

Question

Is there a way to toggle a single CSS property using the animate() function without hiding it? Something like this;

$(".block").animate({ 'border-width': 'toggle' }, 1000);

I cannot use the toggleClass(), addClass() or removeClass(). The reason for this is that it has an unwanted effect on the size of the element that is animated (see JSFiddle).

You can find a JSFiddle here.

What I can think of is this;

if(parseInt($(".block").css('border-width'))) {
    $(".block").animate({ 'border-width': '0'});
}
else {
    $(".block").animate({ 'border-width': '100px'});
}

..Or something like this by adding a class to the element. But I would prefer not to use an if statement. I wonder if this is possible in a single line of code. Feels like it should be.

Answer 1

try using this, in your css:

.block1,
.block2 {
    display: inline-block;
    vertical-align: top;
    color: white;
    height: 100%;
    width: 50%;
    transition: all, 1s;
}
.no-border-top {
    border-top-width: 0;
}

then simply toggle no-border-top class, you can see it here