Question

我找到了一些类似的答案，但没有具体解决我的挑战。我确信我的问题有一个简单的解决方案，但我是jQuery的新手，所以如果我是一个愚蠢的问题，我会提前道歉。

那说......

我有一个基本内容div，点击按钮处理Route::group(['middleware' => ['auth', 'cache.clear']], function() {效果。目前内容div的样式为fadeIn()，看起来相当不错。我想做的是每次用户点击按钮时都能用fadeIn / fadeOut效果切换内容div。但是，由于display属性的flex值，jQuery fadeToggle（）方法看起来并不好看。在类似的情况下 - 减去一个切换 - 我只是通过执行以下操作将显示值从none更改为flex：

flexbox

笨重而且可能是错的，但它确实有效。只是没有

$(‘#someElement’).css(‘display’, ‘flex’).hide().fadeIn()

。有没有更好的方法来处理这个问题，还是应该跳过fadeToggle()并使用fadeToggle()？

提前感谢您的帮助。

JSFiddle

fadeIn()/fadeOut()

Answer 1

您可以在切换后设置css属性，以便display: flex;保持不变。

$('.your-element-selector').fadeToggle().css('display', 'flex');

Answer 2

fadeToggle restores the display type when fading in the element（对于淡出之前的那个），但仅限于最初的display不是none。如果没有，则jquery无法知道淡入后您想要的显示内容，因此它使用默认的block。所以是的，你必须在这里使用fadeIn和fadeOut，只要你想要最初隐藏元素。

此外，由于您使用的是新标准的flexbox，我建议使用css过渡来执行fading等动画，因为它本身支持浏览器，因此具有更好的性能，而jquery使用javascript一点一点地更改不透明度值，它在过去拯救了我们的屁股，但现在可以用更好的解决方案取而代之。

Answer 3

我知道这不能完全解决OP问题，但是一个简单的解决方法（可能会帮助人们了解这篇文章）是将元素包装在普通div中，然后将.fadeToggle应用于此类：

  $(document).ready(function () {
    $('#clickMe').click(function () {
      $('#normalDiv').fadeToggle();
    })
  });

.someFlexBox{display: flex;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="normalDiv">
  <div class="someFlexBox">
    <div class="flex-rows">a</div>
    <div class="flex-rows">b</div>
    <div class="flex-rows">c</div>
  </div>
</div>
<button id="clickMe">click me</button>

我如何一起使用jQuery fadeToggle（）和CSS flexbox？

3 个答案: