表单“提交按钮”不会滑动

Question

Would you please tell me why the slide function won't work ?

https://jsfiddle.net/lcoulon/51gn2v45/

It won't slide either into a real HTML page even i called CSS and jquery :

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link href="../css/slide-submit.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

My final is to integrate this submit button into a Bootstrap4 webpage template.

Many thanks for your help,

Answer 1

First, in JSfiddle example problem was with the links. Here (after few attempts) working example

Second, or your website seems like you forgot to add slider handling code. As you said, no errors in console, so I just tried to add code directly

(Only this part above to see if it would change something)

    /*!
 * Slide to submit button
 */

 $(".slide-submit button").draggable({cancel: false, containment: "parent", axis: "x", stop: function() {
  if (($(this).parent().width() / 2) === ($(this).position().left + 8)) {
    $(this).css({left: "auto", right: 0}).addClass("submitted").text("Submitting...").draggable('false');
    $(this).closest("form").submit();
  } else {
    $(this).css({left: 0});
  }
}}).on("click", function() {
  return false;
});

And it looks like it worked out ( recorded animation here )