播放演示幻灯片动画时，div的宽度减小

Question

单击我的卡标题后，其内容将以显示幻灯片jquery动画.show('slide', {direction: 'up'}, 'slow')/ 显示或隐藏.hide('slide', {direction: 'up'}, 'slow'。问题在于，动画期间宽度.content-annales减小，因此.title-annales右侧的div 缺乏连续性。

这是问题的一个示例：单击此处

jQuery(".title-annales").on("click", function() {
  var element = jQuery(this);
  if (jQuery(this).next().css('display') === 'none') {
    element.css('border-radius', '20px 20px 0px 0px');
    jQuery(this).next().show('slide', {
      direction: 'up'
    }, 'slow', function() {
      element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
    });

  } else {
    jQuery(this).next().hide('slide', {
      direction: 'up'
    }, 'slow', function() {
      element.css('border-radius', '20px');
      element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
    });
  }
});

<div class="card-annales">
  <div class="title-annales">
    <span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
    <h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
  </div>
  <div class="content-annales">
    [...]
  </div>
</div>

编辑：我试图在jsfiddle上复制问题，但它在这里完美地工作。我使用基于引导程序的主题（用于Wordpress的Hestia），当我从引导css文件中删除该属性时box-sizing: border-box;，它的工作原理类似于jsfiddle。

Answer 1

我终于解决了这个问题。

\n\n

1. 问题的可能原因

\n\n

执行时.show(\'slide\', { direction: \'up\'}, \'slow\')，jquery-ui 为所选 div 设置固定宽度，这似乎没有考虑填充（padding: 10pxfor .content-annales）。看看 jquery 动画期间发生了什么：\n我真的不明白为什么不考虑填充，因为它在我的问题中共享的jsfiddle中工作得很好。box-sizing: border-box;它可能是根据我的主题为所有 html 设置的链接。事实上，当我禁用它时，问题就消失了。

\n\n

2.我的解决方案

\n\n

这很简单：我封装.content-annales在一个名为 的父 div 中.content-annales-toggle，除了 之外没有任何样式display: none;。我的动画现在显示/隐藏，.content-annales-toggle因此填充没有问题。

\n\n

这是新代码：

\n\n

jQuery(".title-annales").on("click", function() {\n  var element = jQuery(this);\n  if (jQuery(this).next().css(\'display\') === \'none\') {\n    element.css(\'border-radius\', \'20px 20px 0px 0px\');\n    jQuery(this).next().show(\'slide\', {\n      direction: \'up\'\n    }, \'slow\', function() {\n      element.find(\'.span-msg-mediadroit-annale\').html(\'<i class="fas fa-chevron-circle-up"></i>\');\n    });\n\n  } else {\n    jQuery(this).next().hide(\'slide\', {\n      direction: \'up\'\n    }, \'slow\', function() {\n      element.css(\'border-radius\', \'20px\');\n      element.find(\'.span-msg-mediadroit-annale\').html(\'<i class="fas fa-chevron-circle-down"></i>\');\n    });\n  }\n});\n

\n\n

<style>\n.card-annales {\n    display: block;\n    margin-bottom: 20px;\n}\n.title-annales {\n    -webkit-border-radius: 20px;\n    -moz-border-radius: 20px;\n    border-radius: 20px 20px;\n    background-color: #012f51;\n    color: #ff6501;\n    font-size: 1.7em;\n    border: gray 1px solid;\n    padding: 10px 30px;\n    cursor: pointer;\n}\n.content-annales-toggle {\ndisplay: none; /* edited */\n}\n.content-annales {\n    border-left: gray 1px solid;\n    border-right: gray 1px solid;\n    border-bottom: gray 1px solid;\n    padding: 10px;\n    border-radius: 0px 0px 20px 20px;\n    display: block; /* edited */\n\n}\n.float-right {\nfloat: right;\n}\n.float-left {\nfloat: left;\n}\n</style>\n <div class="card-annales">\n  <div class="title-annales">\n    <span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>\n    <h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom mati\xc3\xa8re</h3>\n  </div>\n  <div class="content-annales-toggle">\n      <div class="content-annales">\n        [...]\n      </div>\n  </div>\n</div>\n

\n