javascript - jQuery UI .effect() 在 if..else 条件下不起作用

Question

如果 position.left 超过 100，我想更改可拖动项的大小，否则它会返回到原始大小。但是，如果我添加 else 语句，jqueryUI effect() 将不起作用。

$("img").draggable({
  axis: "x",
  drag: function() {

    $("div").html($(this).position().left)
    if ($(this).position().left > 100) {
      $(this).effect("size", {
        to: {
          width: 200,
          height: 200
        }
      });
    } else {
      $(this).effect("size", {
        to: {
          width: 100,
          height: 100
        }
      });
    }

  }
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<img src="http://via.placeholder.com/100" alt="">
<div></div>

但如果我删除其他它的工作正常。

$("img").draggable({
  axis: "x",
  drag: function() {

    $("div").html($(this).position().left)
    if ($(this).position().left > 100) {
      $(this).effect("size", {
        to: {
          width: 200,
          height: 200
        }
      });
    } 
    

  }
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<img src="http://via.placeholder.com/100" alt="">
<div></div>

如何在if..else语句中使用.effect()？

Answer 1

这有时会奏效，但需要一些时间。如果你使用 stop 事件，我想它会如你所料的那样工作

https://jsfiddle.net/2jh2323v/

$("img").draggable({
  axis: "x",
  stop: function() {

    $("div").html($(this).position().left)
    if ($(this).position().left > 100) { console.log('if');
      $(this).effect("size", {
        to: {
          width: 200,
          height: 200
        }
      });
    } else{
      $(this).effect("size", {
        to: {
          width: 100,
         height: 100
        }

      });
    }
  }
});