jQuery UI .effect（）在if..else條件下不起作用

我想更改可拖動項目的大小，如果position.left超過100個，則返回原始大小。但如果我添加else聲明，jqueryUI effect()不起作用。jQuery UI .effect（）在if..else條件下不起作用

$("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()？

來源

2017-08-31 Aep Saepudin

這有時候工作，但需要一些時間。如果您使用的停止事件，我認爲這將作爲你的預期

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 
     } 

     }); 
    } 
    } 
});

來源

2017-08-31 05:16:51 Vineesh

感謝您的答覆我真的很感激它，但它沒有達到我想要的。當'position.left'小於100時有一個未知的bug。 –

我解決這個問題，用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>

來源

2017-08-31 05:49:06

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

來源

2017-08-31 07:33:20

jQuery UI .effect（）在if..else條件下不起作用

回答

相關問題