jQuery Animate(） 切换而不隐藏元素

jquery animate() toggle without hiding the element

本文关键字：隐藏 元素 Animate jQuery      更新时间：2023-09-26

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

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

我不能使用 toggleClass（）、addClass（） 或 removeClass（）。这样做的原因是它对动画元素的大小有不需要的影响（请参阅 JSFiddle）。

你可以在这里找到一个JSFiddle。

我能想到的是这个;

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

..或者通过向元素添加一个类来类似的东西。但我宁愿不使用 if 语句。我想知道这在一行代码中是否可行。感觉应该是。

尝试在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;
}

然后只需切换无边框顶级类，您可以在此处看到它

您可以使用变量来定义切换效果：

var currentBorderW = 0;
$('.block1').on('click', function(){
    var nextBorderW = parseInt($(this).css('border-width'));
    $(this).animate({ 'border-width': currentBorderW + 'px' }, 1000);
    currentBorderW = nextBorderW;
});

这是工作jsFiddle。

这能做到你想要的吗？

$('.block1').on('click', function(){
  $(this).animate({ 'border-width': '-=100px' }, 1000);
});
$('.block2').on('click', function(){
  $(this).children().first().show();
  $(this).toggleClass('borderTop', 1000);
});

此代码示例的 JS 小提琴其他一切都是一样的：你的CSS，HTML等。 我只更改了属性border-width的值为 -= 100px 。

我根据jQuery API文档使用了-=运算符：

动画属性也可以是相对的。如果为值提供前导 += 或 -= 字符序列，则通过从属性的当前值中增加或减去给定数字来计算目标值。

编辑：要使其再次滑回，请参阅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);
});
相关文章：