無法將div動畫到所需位置兩次
[英]Unable to animate a div to the required position twice
問題描述
我有8個div，可以根據相應下拉列表中的值進行交換，如下圖所示：
但是，該動畫不能在同一個div上工作兩次，如您在此jsfiddle中所見 。 假設如果我將div 1與div 4交換，然后嘗試將新的div 1與div 7交換，則div會在整個頁面上動畫化！ 嘗試使用Firebug進行調試，所有動畫值均正確且流程也很完美。 仍然是導致此問題的原因。 不知道我是否缺少有關animate()方法的東西！ 這是我的HTML代碼：
<table cellspacing="30">
<tr>
<td>
<div id="img1" style="width:100px;height:40px;position:relative;">
<select id="drop1" name="" class="drop">
<option>1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<input type="checkbox" disabled="disabled" checked="checked">
<img src="" width="120" height="40" id="img_banner1">
</div>
</td>
<td>
<div id="img2" style="width:100px;height:40px;position:relative;">
<select id="drop2" name="" class="drop">
<option>2</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<input type="checkbox" disabled="disabled" checked="checked">
<img src="" width="120" height="40" id="img_banner2">
</div>
</td>
<td>
<div id="img3" style="width:100px;height:40px;position:relative;">
<select id="drop3" name="" class="drop">
<option>3</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<input type="checkbox" disabled="disabled" checked="checked">
<img src="" width="120" height="40" id="img_banner3">
</div>
</td>
<td>
<div id="img4" style="width:100px;height:40px;position:relative;">
<select id="drop4" name="" class="drop">
<option>4</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<input type="checkbox" disabled="disabled" checked="checked">
<img src="" width="120" height="40" id="img_banner4">
</div>
</td>
</tr>
<tr>
<td>
<div id="img5" style="width:100px;height:40px;position:relative;">
<select id="drop5" name="" class="drop">
<option>5</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<input type="checkbox" disabled="disabled" checked="checked">
<img src="" width="120" height="40" id="img_banner5">
</div>
</td>
<td>
<div id="img6" style="width:100px;height:40px;position:relative;">
<select id="drop6" name="" class="drop">
<option>6</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<input type="checkbox" disabled="disabled" checked="checked">
<img src="" width="120" height="40" id="img_banner6">
</div>
</td>
<td>
<div id="img7" style="width:100px;height:40px;position:relative;">
<select id="drop7" name="" class="drop">
<option>7</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<input type="checkbox" disabled="disabled" checked="checked">
<img src="" width="120" height="40" id="img_banner7">
</div>
</td>
<td>
<div id="img8" style="width:100px;height:40px;position:relative;">
<select id="drop8" name="" class="drop">
<option>8</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<input type="checkbox" disabled="disabled" checked="checked">
<img src="" width="120" height="40" id="img_banner8">
</div>
</td>
</tr>
</table>
腳本：
$(".drop").change(function () {
var flag = false;
for (var i = 1; i <= 8; i++) {
var dropdown = document.getElementById('drop' + i);
if (flag == true && source.value != i) {
dropdown.value = i;
}
if (dropdown.value != 0 && dropdown.value != i && flag == false) {
var a = i;
var b = dropdown.value;
var pos = i;
var source_div = document.getElementById('img' + i);
var source = dropdown;
var destination = document.getElementById('drop' + dropdown.value);
var destination_div = document.getElementById('img' + dropdown.value);
var posDrop = Math.ceil(dropdown.value / 4);
var posI = Math.ceil(i / 4);
var modDrop = (dropdown.value % 4);
var modI = (i % 4);
if (modDrop == 0) modDrop = 4;
if (modI == 0) modI = 4;
if (modDrop > modI) {
// move right
var diff = modDrop - modI;
$("#img" + i).animate({
left: +((diff) * 130) + "px"
});
$("#img" + dropdown.value).animate({
right: +((diff) * 130) + "px"
});
} else if (modDrop < modI) {
// move left
var diff = modI - modDrop;
$("#img" + i).animate({
right: +((diff) * 130) + "px"
});
$("#img" + dropdown.value).animate({
left: +((diff) * 130) + "px"
});
}
if (posDrop > posI) {
//move down
$("#img" + i).animate({
top: +(70) + "px"
});
$("#img" + dropdown.value).animate({
bottom: +(70) + "px"
});
} else if (posDrop < posI) {
// move up
$("#img" + i).animate({
bottom: +(70) + "px"
});
$("#img" + dropdown.value).animate({
top: +(70) + "px"
});
}
flag = true;
}
}
destination.value = pos;
var temp_div = source_div.id;
source_div.id = destination_div.id;
destination_div.id = temp_div;
var temp = source.id;
source.id = destination.id;
destination.id = temp;
});
2 個解決方案
解決方案1
1 2014-10-12 11:22:06
我可以建議您使用完全不同的方法嗎？ 而不是直接為div設置動畫，而是使用數組存儲有關哪個div位於何處的信息，然后在每次進行重新排序時都重新渲染頁面的這一部分。
所以說你有一個像這樣的數組：
[0、1、2、3、4、5、6、7]
然后將值'x'推入div'y'導致將array [y-1]存儲在z中，將array [y-1]設置為x-1，然后將array [x-1]設置為z。
現在，您已經以穩定的方式在陣列中切換了它們。
然后重新渲染表。
如果願意，還可以使用data-arVal屬性將數組值添加到div中。 這可能是一些不錯的動畫的基礎。
這樣遍歷數組
jQuery.each(array, function(i, arVal){
//and set the values of the data attribute
$('td:nth-child(' + i + ') div)'.attr('data-arVal', '' + arVal + '' );
});
數據屬性是您的朋友。 而且jQuery每個循環比循環更方便和強大，我強烈建議您使用jQuery.each循環。
ps可能是一些錯字，沒有測試我寫的內容。
解決方案2
1 已采納 2014-10-12 11:29:46
我創建了http://jsfiddle.net/qa03f7g1/27/ 。 它可能並不完美，但是代碼更簡單。 我還從表中刪除了div並對其進行了絕對定位。
$(".drop").change(function () {
var $thisElem = $(this).parent();
var swapIndex = $(this).children(":selected").val();
var $swapElem = $("#img" + swapIndex);
var thisPosition = $thisElem.position();
var swapPosition = $swapElem.position();
$thisElem.finish()
.animate({left: swapPosition.left})
.animate({top: swapPosition.top});
$swapElem.finish()
.animate({left: thisPosition.left})
.animate({top: thisPosition.top});
$swapElem.attr("id", $thisElem.attr("id"));
$thisElem.attr("id", "img" + swapIndex);
});
一些問題：
- 如果在同一
left位置，則將每個項目設置為同一left位置時會有延遲。 可以使用if語句解決此問題。 - 您可能需要將每個選項設置為其對應的位置。 這很容易完成，如果您想完成，請發表評論。
根據位置對div進行動畫處理
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.