如何淡出显示：内联块

6 回答

• 2

  $("div").fadeIn().css("display","inline-block");

  回复于 2024-04-20T03:38:37+08:00
• 219

  Makura的回答对我不起作用所以我的解决方案是

  <div id="div" style="display: none">Some content</div>
  
  $('#div').css('display', 'inline-block').hide().fadeIn();
  

  hide 立即应用 display: none 但在此之前它将当前显示值保存在jQuery数据缓存中，该缓存将由后续动画调用恢复 .

  所以 div 开始静态定义为 display: none . 然后它被设置为 inline-block 并立即隐藏，只是为了褪色回到 inline-block

  回复于 2024-04-20T03:38:37+08:00
• 8

  即使使用css预设的 display:none 也能正常工作 . 使用

  $('#element').fadeIn().addClass('displaytype');
  

  （还有 $('#element').fadeOut().removeClass('displaytype'); ）

  使用CSS中的设置：

  #element.displaytype{display:inline-block;}
  

  我认为这是一个解决方法，因为我认为 fadeIn() 应该工作，以便它只删除最后一条规则 - 设置为 #element{display:inline-block;display:none;} 时 display:none 但它正在故意删除两者 .

  回复于 2024-04-20T03:38:37+08:00
• 0

  根据jQuery docs为 .show() ，

  如果元素的显示值为内联，则隐藏并显示，它将再次以内联方式显示 .

  所以我对这个问题的解决方案是将css规则应用于类显示：元素上的inline-block，然后我添加了另一个名为"hide"的类，它应用了display：none;当我在元素上 .show() 时，它显示为内联 .

  回复于 2024-04-20T03:38:37+08:00
• 38

  您可以使用jQuery的animate函数自行更改不透明度，使显示不受影响 .

  回复于 2024-04-20T03:38:37+08:00
• 11

  只是为了充实Phil的好主意，这里有一个fadeIn（），它在每个元素中加载淡入淡出，类依次为.faded，转换为animate（）：

  旧：

  $(".faded").each(function(i) {
      $(this).delay(i * 300).fadeIn();
  });
  

  新：

  $(".faded").each(function(i) {
      $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
  });
  

  希望能像我一样帮助另一个jQuery newb :)如果有更好的方法，请告诉我们！

  回复于 2024-04-20T03:38:37+08:00