jQuery UI .effect（）はif..else条件では動作しません

Question

position.left以上の場合はドラッグ可能なアイテムのサイズを変更したい場合は元のサイズに戻します。 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>

しかし、私は他の作業を適切に削除した場合。 if..else文で .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 
 
     } 
 
     }); 
 
    } 
 
    
 

 
    } 
 
});

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

？

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を使用して、これを解決するため、

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

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

 
    } 
 
});

img { 
 
    transition:width 1s; 
 
}

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

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>