Как заставить анимацию появлятся в нужном месте?

Question

[Александр Ivanov]

При удалении у редактировании записи, необходимо, чтобы анимация происходила в нужном месте( НА ДАННЫ МОМЕНТ ТОЛЬКО В ПЕРВОМ БЛОКЕ). Редактирую вторую запись, анимация на первой и так с любой.
Код

//вывожу блоки:
?> <div  style="border-style:groove; width:900px; height:350px; background:black; color:white;  background-color:rgba(0, 0, 0, 0.5); padding-bottom:20px;margin-bottom:10px;">
                    <? /*Форматирую строку с датой */ $expd = explode("-",$row[4]);
                                                      if($row[14]==null){$pic='images\ava.jpg';}else $pic=$row[14];
                echo"<div  style='float:left; position:relative;'><img style='width:50px; height: 50px; margin: 10px;border-radius: 7px 7px 7px 7px;' src='$pic'></div>";

                echo"<a id='User$row[0]' class='userID' target='_blank' href='ProfileUsers.php?name=$row[0]&un1=$row[1]&un2=$row[2]&un3=$row[3]&un4=$row[4]&un5=$row[5]&un6=$row[6]&un7=$row[7]&un8=$row[8]&un9=$row[9]&un10=$row[10]&un11=$row[11]&un12=$row[12]&un13=$row[13]&un14=$row[14]'  style='float:left; position:relative; margin-top: 10px;'>$row[0]</a>";
                   // printf("<a target='_blank' href='DelPost.php?nameDel=$row[0]&textDel=$row[1]' style='float:right;'> <img width='30px' height='30px' src='images\close.png'></a>");
                   // printf("<a target='_blank' href='RedactPost.php?name=$row[0]&text=$row[1]' style='float:right;'> <img width='30px' height='30px' src='edit.png'></a>");
                    printf("<button data-msg_id='$row[1]' data-user_id='$row[0]' class='agaxClose' id='agaxClose' style='margin:5px; border-radius: 10px 10px 10px 10px; float:right;background-image: url(images/crestic.png); background-size: cover;  width: 30px; height:30px;'></button>");

                    printf("<button data-msg_id='$row[1]' data-user_id='$row[0]' data-louder_id='louder$row[0]$row[1]' class='agaxEdit' id='agaxEdit' style='margin:5px; border-radius: 10px 10px 10px 10px; float:right;background-image: url(images/edit.png); background-size: cover;  width: 30px; height:30px;'></button>");

        echo"<br><br><div style='float:left;position:relative; display:block; height: 16px;'> $expd[2].$expd[1].$expd[0]</div>";
        printf("<br>"); 
        printf("<br>"); 
        printf("<br>");
                printf("<br>");
                printf("<div id='louder$row[0]$row[1]' style='position: absolute;padding-left:365px;display: none;'><img src='images/loader.gif' /></div>");

                    if($row[5] != null) {
                        printf("<p id='textUsers$row[0]' class='messageID' style='display:block; padding-left:100px; width:400px; float:left; word-wrap: break-word;'>%s</p><img style='width:300px; height:200px; padding-left:0px;' src='source\%s'>", $row[1], $row[5]);
                    }else  printf("<p id='textUsers$row[0]' class='messageID' style='display:block; padding-left:100px; width:400px; float:left; word-wrap: break-word;'>%s</p><img style='width:300px; height:200px; padding-left:0px;' src='images\pic.jpg'>",$row[1]);
                        ?></div><?

//Обрабатываю:
<script type="text/javascript">
    $(document).ready(function(){
        $(".agaxEdit").click(function(){
          var msg = $(this).data('msg_id');
          var users = $(this).data('user_id');
//Тут пытаюсь получить блок с анимацией которую нужно показывать в конкретном блоке
      var louder = $(this).data('louder_id');
          var result = prompt('Введите текст для изменения сообщения');
            if(result) {
                $.ajax({
                    url: 'RedactPost.php',
                    data: {nameUpp: users, textUpp: result, oldText: msg},
                    success: function(){
                        alert('Запись изменена');
                    },
                    type: 'GET',
                    beforeSend: function () {
                        $(louder).css("display", "block");
                        $(louder).animate({opacity: 1}, 500);
                    }
                }).done(function (data) {
                    $(louder).animate({opacity: 0}, 500, function () {
                        $(louder).css("display", "none");
                    });
                });
                //после отработки функции, делаю редирект, чтобы увидеть результат.
                window.location.href = 'index.php';
            }});
    });
</script>

PS на синтаксис не ругается, в консоли ошибка GET book2/js/ClockAnAuto.js

Comments

[Stalker_RED]

Который день уже эта ошибка. Исправлять не планируете?

[Александр Ivanov]

Stalker_RED, не просто планирую) а пытаюсь исправить)

Answer 1

[Александр Ivanov]

Всё получилось)

beforeSend: function () {
                        $("#"+louder).css("display", "block");
                        $("#"+louder).animate({opacity: 1}, 500);
                    }
                }).done(function (data) {
                    $("#"+louder).animate({opacity: 0}, 500, function () {
                        $("#"+louder).css("display", "none");
                    });

Answer 2

[Stalker_RED]

var result = prompt('Введите текст для изменения сообщения');
            if(result) {
                 /* асинхронный запрос */
                //после отработки функции, делаю редирект, чтобы увидеть результат.
                window.location.href = 'index.php'; // эта штука не ждет ничего, а сразу выполняется
            }});

Comments

[Александр Ivanov]

Да, редирект происходит в конце скрипта, ничего не ожидая. Но это ведь никак не влияет на отработку самого скрипта?

[Александр Ivanov]

Собственно, если result == 1, тогда ему и не нужно ничего ждать? или я не прав?

[Stalker_RED]

Александр Ivanov, а зачем тогда этот ajax и анимация?

[Александр Ivanov]

Stalker_RED, учусь) вот хочется сделать всё красиво) собственно, всё и сейчас работает, но анимация, только в первом блоке, а должна в том блоке, в котором я нажимаю на кнопку.(P.S. работает всё не так как в примере, в примере уже моя попытка, осуществить задуманное)