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>

如何在.effect()声明中使用if..else？

Answer 1

这有时会起作用，但需要一些时间。如果您使用停止事件，我认为它将按预期工作

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
        }

      });
    }
  }
});

Answer 2

我使用css transition解决了这个问题，

＆＃13;

＆＃13;

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

    $("div").html($(this).position().left)
    if ($(this).position().left > 100) {
      $(this).width(200);
    } else {
      $(this).width(100);
    }

  }
});

＆＃13;

img {
  transition:width 1s;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用stop代替drag：

$("img").draggable({
  axis: "x",
  stop: function( event, ui ){
    $("div").html($(ui.helper).position().left)
    if ($(ui.helper).position().left > 100) {
      $(ui.helper).effect("size", {
        to: {
          width: 200,
          height: 200
        }
      });
    } else {
      $(ui.helper).effect("size", {
        to: {
          width: 100,
          height: 100
        }
      });
    }

  }
});

.ui-draggable{
top:0px !important;
}

<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>