私のHTMLは次のとおりです。データベースからプルしてwhile
ループを使用しているため、これには複数のインスタンスがあります。
<div class="container">
<div class="some_stuff">content1</div>
<div class="more_stuff">content2</div>
<div class="delete">
<a href="#" id="itemID" class="deleteContainer">Delete</a>
</div>
</div>
jQuery:
$(function() {
$(".deleteContainer").click(function() {
var container=$(this).closest("div.container");
var containerid = $(this).attr("id");
$.ajax({
type: "POST",
url: "delete.php",
data: "id=" + containerid,
cache: false,
success: function() {
container.slideUp(500, function() {$(this).remove();});
}
});
return false;
});
});
各コンテナ内の「削除」リンクにより、適切なフィールドがデータベースから削除され、成功すると、適切なコンテナがスライドして削除されるという考え方です。delete.php
正常に動作し、アニメーション効果はほとんど機能しています。私が抱えている問題は、slideUp
がスライドせず、代わりに 2 つの部分で発生することです。最初に、下部の余白のように見えるものが<div class="container">
即座に消え (スライド効果はありません)、次に約 4 分の 1 秒後に残りが消えます。が<div class="container">
消えます。データベース呼び出しは正常に機能します。適切なコンテンツが削除され、その後のアクセスでページが正しくレンダリングされます。アニメーションで何が起こっているのかわかりません (Safari、Opera、Chrome、および Firefox でテスト済み)。
サーバー応答の遅延など、AJAX の問題であるかどうかをテストする際に、次のことを試しました。
$(window).load(function(){
$(".container").click(function(){
$(this).slideToggle(500);
});
});
それにはまだバラバラに発生するという同じ問題があるslideUp()
ので、これは jQuery と HTML 構造 (おそらくネストされた<div>
s?) に関係していると思います。slideUp()
同じページの他のシナリオは正常に機能します。