删除记录动画不适用于对话框确认

Question

好的，我这里是Ajax删除记录。 我试图添加jQuery对话框确认，而不是使用JavaScript确认。 删除功能有效，但问题是删除行的动画无效。

这就是我现在所拥有的。 http://jsfiddle.net/altaire/YJC44/

任何帮助将不胜感激。 谢谢！

p

while($row = $result->fetch_assoc()){
echo'<tr class="records">';
echo'<td>'.$i++.'</td>
<td align="center"><a href="#" name="'.$row["counter"].','.$row["idas"].'" class="delbuttons"><img src="images/del.png" border="0" width="10" height="10" title="Delete"></a></td>
<tr>;

jQuery /阿贾克斯

 $(".delbuttons").click(function () {
//e.preventDefault();
var element = $(this);
var del_id = element.attr("name");
var info = 'prdelete=' + del_id;

$("#dialog").dialog({
    buttons: {
        "Confirm": function () {
            $.ajax({
                type: "GET",
                url: "delete.php",
                data: info,
                success: function () {}
            });
            $(this).parents(".records").animate({
                backgroundColor: "#fbc7c7"
            }, "fast")
                .animate({
                opacity: "hide"
            }, "slow", function () {
                setTimeout(function () {
                    window.location.reload();
                }, 1000);
            });
            $(this).dialog("close");
        },
            "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("#dialog").dialog("open");
});

Answer 1

您必须将js添加为“ //code.jquery.com/ui/1.11.0/jquery-ui.js”。 参见下面的演示。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script> 
$(document).ready(function(){
   $( "#effect" ).animate({backgroundColor: "#aa0000",color: "#fff",width: 500},5000);

});
</script> 
</head>
<body>
<div id="effect"style="border:1px solid red;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Answer 2

尝试这个

$('a[name="'+del_id+'"]').parents(".records")...

而不是$(this).parents(".records")...

如果您使用$（this），则尝试为$（“＃dialog”）设置动画。

演示： http : //jsfiddle.net/yeyene/YJC44/1/

$(".delbuttons").click(function () {
//e.preventDefault();
var element = $(this);
var del_id = element.attr("name");
//alert(del_id);
var info = 'prdelete=' + del_id;

$("#dialog").dialog({
    buttons: {
        "Confirm": function () {
            $.ajax({
                type: "GET",
                url: "delete.php",
                data: info,
                success: function () {
                     // $(this).parents(".records")
                     $('a[name="'+del_id+'"]').parents(".records")
                     .css({'background': '#fbc7c7'})
                     .animate({             
                         opacity: 0
                     }, 1000, function () {
                         setTimeout(function () {
                             window.location.reload();
                         }, 1000);
                     });
                    $(this).dialog("close");
                }
            });
        },
            "Cancel": function () {
            $(this).dialog("close");
        }
    }
});
$("#dialog").dialog("open");
});

删除记录动画不适用于对话框确认

问题描述

2 个解决方案

解决方案1
0 2014-08-01 07:33:10

解决方案2
0 2014-08-01 08:00:24

演示： http : //jsfiddle.net/yeyene/YJC44/1/

删除记录动画不适用于对话框确认

问题描述

2 个解决方案

解决方案1 0 2014-08-01 07:33:10

解决方案2 0 2014-08-01 08:00:24

演示： http : //jsfiddle.net/yeyene/YJC44/1/

解决方案1
0 2014-08-01 07:33:10

解决方案2
0 2014-08-01 08:00:24