Я получаю немного резкого рывка для slideUp / slideDown открытия редактора Froala в верхней части редактора. Внезапно прыгает вверх / вниз около вершины. Не худший, но раздражающий, когда вы хотите добиться более плавного эффекта. Пробовал некоторые настройки полей, настройки отступов, настройки ширины, настройки переполнения в #details и #details_box, но не могу устранить этот последний бит дрожания!
Нажмите "Нажмите здесь, чтобы открыть" и "Закрыть окно сведений", чтобы увидеть дрожание. JS Fiddle Here.
Полный код ниже:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Include Froala external CSS. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<!-- Include Froala Editor style. -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.6/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.6/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!-- Include Editor JS files for Froala. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1//js/froala_editor.pkgd.min.js"></script>
</head>
<body style="padding-top:56px;">
<div class="container">
<form id="the_form" method='post' action="" enctype="multipart/form-data">
<h3 id="title">Enter your Content</h3>
<div class="form-group">
<textarea class='form-control' rows="5" name="question" id="question"></textarea>
</div>
<!-- this is where the FROALA editor is placed -->
<div class="form-group">
<p><span class="link" id="details_open" style="cursor:pointer">Add Details (optional for Questions)--> Click Here to Open</span></p>
<div id="details_box" style="display:none;">
<div id="details"></div>
</div>
</div>
</form>
<div class="form-group">
<label for="tags">Enter tags below</label>
<input class="form-control" name="myTags" type="text" id="myTags" value="">
</div>
<button type="submit" class="btn btn-primary" name="publish" value="Publish New Blog" id="submit">Publish</button>
<button type="submit" class="btn btn-primary" name="draft" value="Draft New Blog" id="submit">Save as Draft</button>
</div>
<script>
$(document).ready(function(){
//**************************************************************************
// open Froala text editor
//**************************************************************************
$('#details_open').on("click",function(){
//change the open/close clickable link for Froala editor
$("#details_open").after('<span class="link" id="details_close" style="cursor:pointer"> --> close details window</span>');
$("#details_open").hide();
$('#details_box').slideDown(1000);
});
//**************************************************************************
// close Froala text editor
//**************************************************************************
$(document).on('click', '#details_close', function(){
$('#details_box').slideUp(1000);
$('#details_close').remove();
$("#details_open").show();
});
$('#details')
.froalaEditor({
toolbarButtons: ['bold', 'italic', 'underline', 'emoticons', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'insertLink', 'insertImage', 'insertVideo', 'insertHR', 'undo', 'redo', 'clearFormatting','html','scripture'],
})
});
</script>
</body>
</html>