Wordpress 滑动切换、淡入淡出、淡出动画在动画期间向上移动

我正在为一个WordPress网站创建一个简单的“多读/少读”按钮，当按下该按钮时，可以使用滑动切换来显示隐藏的内容。它以WordPress插件的形式出现。按钮fadeIn和fadeOut。我使用php/html来显示页面

除了一个小小的打嗝，一切都很顺利。出于某种原因，当单击“阅读更多”按钮并启动动画时，content div（或p标记-我不能确定）开始向下移动几个像素，然后在动画完成后向上移动。反之亦然，单击“无读取”按钮时，动画也会执行相同的操作

我浏览了php和css，没有找到任何东西。我甚至检查了元素，并以这种方式删除了所有css，但这没有帮助

我已经包括了所有的代码和一个简短的视频来告诉你我的意思

以下是视频的链接：

Javascript

jQuery('.wpsm-content').addClass('wpsm-content-hide');
jQuery('.wpsm-show, .wpsm-hide').removeClass('wpsm-content-hide');
jQuery('.wpsm-show').on('click', function (e) {
    "use strict";
    var currentContent = jQuery(this);
    function complete() {
        jQuery(currentContent).next('.wpsm-content').slideToggle(800);
    }
    jQuery(this).fadeOut(200, complete);
    e.preventDefault();
});
jQuery('.wpsm-hide').on('click', function (e) {
    "use strict";
    var wpsm = jQuery(this).parent('.wpsm-content');
    function complete() {
        wpsm.prev('.wpsm-show').fadeIn(200);    // Read More
    }
    wpsm.slideToggle(1250, complete);
    e.preventDefault();
});

CSS

.wpsm-show a, .wpsm-show:active, .wpsm-show:visited {
   cursor: pointer;
   text-decoration: none;
}
.wpsm-show:hover {
   cursor: pointer;
   text-decoration: underline;
}
.wpsm-hide a, .wpsm-hide:active, .wpsm-hide:visited {
   cursor: pointer;
   text-decoration: none;
}
.wpsm-hide:hover {
   cursor: pointer;
   text-decoration: underline;
}
.wpsm-content-hide {
  display: none;
}

PHP/HTML

add_shortcode( 'show_more', 'wpsm');
function wpsm( $attr, $smcontent ) {
  if (!isset($attr['color'])) $attr['color'] = '#cc0000';
  if (!isset($attr['list'])) $attr['list'] = '';
  if (!isset($attr['more'])) $attr['more'] = 'show more';
  if (!isset($attr['less'])) $attr['less'] = 'show less';
  $wpsm_string  = '<div class="show_more">';
  $wpsm_string .= '<p class="wpsm-show" style="color: ' . $attr['color'] . ' ">'; 
  $wpsm_string .= $attr['list']. ' '  . $attr['more'];
  $wpsm_string .= '</p><div class="wpsm-content">';
  $wpsm_string .= $smcontent;
  $wpsm_string .= ' <p class="wpsm-hide" style="color: ' . $attr['color'] . ' ">'; 
  $wpsm_string .= $attr['list']. ' '  . $attr['less'];
  $wpsm_string .= '</p>';
  $wpsm_string .= '</div></div>';
  return $wpsm_string;
}

add_action( 'wp_enqueue_scripts', 'sm_scripts');
function sm_scripts (){
  $plugin_url = plugins_url( '/', __FILE__ );
  wp_enqueue_style (
    'sm-style',
    $plugin_url . 'wpsm-style.css'
  );
  wp_enqueue_script (
    'sm-script',
    $plugin_url . 'wpsm-script-mine.js',
    array( 'jquery' ),
    '1.0.1',
    true
  );
}

add_action('wp_footer', 'sm_scripts');
?>

add_shortcode（'show_more'，'wpsm'）；
函数wpsm（$attr，$smcontent）{
如果（！isset（$attr['color']）$attr['color']='#cc0000'；
如果（！isset（$attr['list']）$attr['list']=''；
如果（！isset（$attr['more']）$attr['more']='show more'；
如果（！isset（$attr['less']）$attr['less']='show less'；
$wpsm_字符串=“”；
$wpsm_string.='
”；
$wpsm_string.=$attr['list'].'.$attr['more']；
$wpsm_string.='
'；
$wpsm_字符串=$smcontent；
$wpsm_string.='
”；
$wpsm_string.=$attr['list'].'.$attr['less']；
$wpsm_string.='
'；
$wpsm_字符串=''；
返回$wpsm_字符串；
}
添加_操作（“wp_排队_脚本”、“sm_脚本”）；
函数sm_脚本（）{
$plugin\u url=plugins\u url（“/”，\uuuuu文件）；
wp_排队式(
“sm风格”，
$plugin_url.'wpsm style.css'
);
wp_排队_脚本(
“sm脚本”，
$plugin_url.'wpsm script mine.js'，
数组（'jquery'），
'1.0.1',
真的
);
}
添加_操作（“wp_页脚”、“sm_脚本”）；
?>