Question

有没有办法使用animate（）函数切换单个CSS属性而不隐藏它？像这样的东西;

$(".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;
}

然后只需切换no-border-top类，就可以看到它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使用-=运算符：

动画属性也可以是相对的。如果一个值带有前导+ =或 - =字符序列，则通过在属性的当前值中加上或减去给定数字来计算目标值。

编辑：要重新播放，请参阅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);
});

jquery animate（）切换而不隐藏元素

3 个答案: