CODEWITHSUNDEEP
jqueryjquery-ui
Norman
Norman

Reputation: 6365

Slide an appended <div> from right to left

I'm trying to slide a <div> from right to left that get's appended to it's parent. I'm not having much success with this.

What I'm trying to achieve is medium speed slide in from the right to left when it gets appended. I tried using jQueryUI as well as JQuery, but cannot get this right. What is the correct way to do this (without jQueryUI or if that cant be avoided, with it)

<!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>

Upvotes: 0

Views: 218

Answers (1)

insertusernamehere
insertusernamehere

Reputation: 23580

You have to select the newly appended element. So you can rewrite it to this:

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

Another way of doing it, is this, without the need of .find():

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

Demo

Try before buy (Version 1)

Try before buy (Version 2)

Upvotes: 1

Related Questions