jquery animate() toggle без скрытия элемента

Question

Есть ли способ переключить одно свойство CSS с помощью функции animate(), не скрывая его? Что-то вроде этого;

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

Я не могу использовать toggleClass(), addClass() или removeClass(). Причина этого в том, что она оказывает нежелательное влияние на размер анимированного элемента (см. JSFiddle).

You can find a JSFiddle here.

Что я могу думать это;

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

..Что-то вроде этого, добавляя класс к элементу. Но я бы предпочел не использовать инструкцию if. Интересно, возможно ли это в одной строке кода. Похоже, должно быть.

Answer 1

попытаться использовать это в вашем 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; 
} 

тогда просто не переключать не-границы высшего класса, вы можете видеть это here

Answer 2

Вы можете использовать переменные, чтобы определить тумблер эффект:

var currentBorderW = 0; 
$('.block1').on('click', function(){ 
    var nextBorderW = parseInt($(this).css('border-width')); 

    $(this).animate({ 'border-width': currentBorderW + 'px' }, 1000); 

    currentBorderW = nextBorderW; 
}); 

Here is working jsFiddle.

Answer 3

Это делает то, что вы хотите?

$('.block1').on('click', function(){ 
    $(this).animate({ 'border-width': '-=100px' }, 1000); 
}); 

$('.block2').on('click', function(){ 
    $(this).children().first().show(); 
    $(this).toggleClass('borderTop', 1000); 
}); 

JS Fiddle for this code sample Все остальное то же самое: ваш CSS, HTML и т.д. Я только изменил свойство border-width иметь значение -= 100px.

используется оператор -=, согласно jQuery API docs:

анимированные свойства также могут быть относительным. Если значение снабжается ведущей + = или - = последовательностью символов, то целевое значение вычисляется путем добавления или вычитания заданного числа из текущего значения свойства.

EDIT: Для того, чтобы сделать его скользить назад снова, см this example on JSFiddle

(function(){ 
    var clickCount=0; 
    $('.block1').click(function(){ 
    if (clickCount%2==0) { 
    $(this).animate({ 'border-width': '-=100px' }, 1000); 
    } 
    else { 
    $(this).animate({ 'border-width': '+=100px' }, 1000); 
    } 
    clickCount++; 
    }); 
})(); 

$('.block2').on('click', function(){ 
    $(this).children().first().show(); 
    $(this).toggleClass('borderTop', 1000); 
});