如何同时使用 jQuery fadeToggle() 和 CSS flexbox？

Question

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

也就是说……

我有一个基本内容 div，具有通过单击按钮处理的 fadeIn() 效果。目前内容 div 的样式为 flexbox，看起来相当不错。我想要做的是能够在每次用户单击按钮时使用 fadeIn/fadeOut 效果切换内容 div。然而，jQuery fadeToggle() 方法似乎并不好用，这要归功于显示的 flex 值属性。在类似的情况下——减去一个切换——我只是通过执行类似的操作将显示值从 none 更改为 flex：

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

笨拙而且可能是错误的，但它确实有效。只是不使用 fadeToggle()。有没有更好的方法来处理这个问题，还是我应该跳过 fadeToggle() 并使用 fadeIn()/fadeOut()？

在此先感谢您的帮助。

JSFiddle

<style>
body {
    font-size: 16px;
    color: white;
    padding: 20px;
}

.about-btn {
    background: #0069a6;
    width: 135px;
    height: 35px;
    text-align: center;
    padding-top: 20px;
}
.about-wrapper {
    background: #0069a6;
    box-shadow: 0 20px 80px 0 rgba(0, 0, 0, .45);
    position: absolute;
    bottom: 130px;
    height: 200px;
    width: 500px;
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.about {
    width: 80%;
    height: 50%;
    float: left;
    text-align: justify;
}
.about-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px; 
}
</style>

<div class="about-btn">
  CLICK ME
</div>

<div class="about-wrapper">
  <div class="about-close">
    <span class="about-icon">X</span>
  </div>
  <div class="about">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a auctor turpis. Aenean eleifend augue eget ex laoreet, eget cursus ante lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent dapibus enim nec nunc bibendum, quis consequat urna laoreet. 
  </div>
</div>

<script>
$('.about-btn').on('click', function(){
  $('.about-wrapper').css("display", "flex").hide().fadeToggle();
})

$('.about-close').on('click', function() {
    $('.about-wrapper').fadeOut();
});
</script>

Answer 1

fadeToggle restores the display type when fading in the element（到淡出前那个），但前提是初始的display不是none。如果是none，jquery无法知道淡入后要显示什么，所以它使用默认的block。所以是的，只要您希望元素最初被隐藏，就必须在此处使用 fadeIn 和 fadeOut。

此外，由于您使用的是新标准的 flexbox，我建议使用 css 过渡来制作淡入淡出等动画，由于浏览器本身支持它，因此性能更好，而 jquery 使用 javascript 一点一点地改变不透明度值，这在过去救了我们的屁股，但现在可以用更好的解决方案代替。

Answer 2

我知道这并不能完全回答 OP 但一个简单的解决方法（可能会帮助人们遇到这个 post）是将元素包装在正常的 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>

Answer 3

您可以在 toggle-ing 之后设置 css 属性，因此 display: flex; 仍然存在。

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

如何同时使用 jQuery fadeToggle() 和 CSS flexbox？

How do I use jQuery fadeToggle() and CSS flexbox together?

css

jquery

user-experience

fadein

flexbox