Question

我试图将<div>从右向左滑动，并将其附加到其父母身上。我没有取得多大成功。

我试图实现的是当它被追加时从右到左的中速滑动。我尝试使用jQueryUI以及JQuery，但无法做到这一点。执行此操作的正确方法是什么（没有jQueryUI或者无法避免使用它）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side bar poll thingy</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://localhost/site/scripts/jquery.validate.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    $('.acceptUser, .rejectUser').click(function () {

        var action = $(this).attr('class');
            var type = $(this).data('id');


        var parentTag = $(this).parent("div");

        parentTag.empty();

        parentTag.append("<div class='flag' style='background:red;'>Success</div>").animate({left:'0px'});
    });
});

</script>
</head>
<body>

<div id="container">
UserName : Norman | SignedUp: 10-09-2013 | SignedUp Location: US

<div class="adminLinks">
    <span class="acceptUser" data-id="24">Accept</span>
    <span class="rejectUser" data-id="24">Reject</span>
</div>

</div>

</body>
</html>

Answer 1

您必须选择新添加的元素。所以你可以改写它：

 parentTag.append('<div class="flag" style="background:red;">Success</div>');
 parentTag.find('div.flag').animate({ left: '0px' });

另一种方法是这样做，而不需要.find()：

$('<div class="flag" style="background: red;">Success</div>')
    .appendTo(parentTag)
    .animate({ left: '0px' });

<强>演示

Try before buy（第1版）

Try before buy（第2版）

从右向左滑动附加的<div> </div>

1 个答案: