Question

我不知道为什么这对我不起作用。

  }).success(function(data){
    if(data.status == 'success'){
            // $("#useravatar").empty();

                for(i = 0;i < data.id.length; i++){
            $("#useravatar").prepend('<div id="av'+data.id[i]+'" class="avatar">'+data.avatar[i]+'</div>');
            var dropDiv = $('#av'+data.id[i]);  // Code from here dont work. No error. tried alert(data.id[i]); and is fine.

        dropDiv.css({
        left: 130,
        top: -190,
        opacity: 0,
        display: 'inline'
    }).animate({
        left: 5,
        top: 10,
        opacity: 1
    }, 7000, 'easeOutBounce');

            }

            }

});

如果我单独使用此代码：

  var dropDiv = $('#useravatar');  

        dropDiv.css({
        left: 130,
        top: -190,
        opacity: 0,
        display: 'inline'
    }).animate({
        left: 5,
        top: 10,
        opacity: 1
    }, 7000, 'easeOutBounce');

将与该div一起使用。

我的问题是为什么第一个div不起作用？如何通过动画让div下拉？

修改

我已经在同一个文件中尝试了所有上述代码：但它也没有工作（第二个函数没有被调用或没有做任何事情）。

 function getchatuser() {
    $.ajax({
       type: "POST",
       url: "../users/process.php",
       data: {getchatuser: "getchatuser"},
       cache: false,
       dataType: 'json',
       async: false
    }).success(function (dat) {
          if (dat.status == 'success') {
              //$("#useravatar").empty();
                 for (i = 0; i < dat.id.length; i++) {
                   $("#useravatar").prepend('<div id="av' + dat.id[i] + '" class="avatar">' + dat.avatar[i] + '</div>');


                dropdivs(dat.id[i]);

        }
    }

  });
  }

 function dropdivs(idDiv) {
       // alert(idDiv); ----------> just to try this and it works got 112
     dropDiv = $('#av' + idDiv);
     dropDiv.css({
                 left: 130,
                  top: -190,
              opacity: 0,
              display: 'inline'
         }).animate({
                 left: 5,
                  top: 10,
              opacity: 1
     }, 7000, 'easeOutBounce');
  }

Answer 1

演示 http://jsfiddle.net/5fKJf/4/

更新了代码以显示bdrx
建议的退回效果
更新代码以使用对象，+花式化身;）

    var dat = {
        id: [1, 2, 3, 4],
        avatar: ['https://cdn2.iconfinder.com/data/icons/male-users-2/512/1-32.png',
            'https://cdn2.iconfinder.com/data/icons/male-users-2/512/14-32.png',
            'https://cdn2.iconfinder.com/data/icons/male-users-2/512/8-32.png',
            'https://cdn2.iconfinder.com/data/icons/male-users-2/512/2-32.png']
    };

    for (i = 0; i < dat.id.length; i++) {
        $("#useravatar").prepend($('<div id="av' + dat.id[i] + '" class="avatar"><img src="' + dat.avatar[i] + '" alt="" /></div>').css({
            left: 130,
            top: -190,
            opacity: 0
        }).delay(i * 50).animate({
            left: 5,
            top: 0,
            opacity: 1
        }, 1500, 'easeOutBounce', function () {

        }));
    }

Answer 2

试试这个：

var dropDiv = $('<div id="av' + data.id[i] + '" class="avatar">' + data.avatar[i] + '</div>');
$("#useravatar").prepend(dropDiv);

无需使用jQuery选择器来查找之前创建的元素。上面的代码应该是一个更快的解决方案。

Answer 3

原帖子中的这一部分可能是问题

// `dat` may be `dat` (`data`) `response` from `request`,
// if `dat` does not have `status` property, i.e.g., `dat.status`,
// within `dat` ( `json` `object` ? ),
// `if` `condition` may return `false`,
// not continue to  pieces inside `if`'s `{}`
.success(function (dat) {
          if (dat.status == 'success') { }
})

试试这个（模式）

function getchatuser() {
    $.ajax({
       type: "POST",
       url: "../users/process.php",
       data: {getchatuser: "getchatuser"},
       cache: false,
       dataType: 'json',
       async: false
    })
    .done(function(data, textStatus, jqxhr) {
             // `data` : `data` returned, ( `json` `object` ? )
             // `textStatus`, `string`, i.e.g., `success`
             // `jqxhr`, `object` 
             // if `textStatus` === `success`
          if ( textStatus === "success" ) {
             // `console.log()` `dat`, `textStatus`, `jqxhr`
             // returned from `request`
              console.log(data, textStatus, jqxhr);
             // below pieces not addressed, 
             // adjust, continue, based on `response`

             // $("#useravatar").empty();
             //    for (i = 0; i < data.id.length; i++) {
             //      $("#useravatar").prepend('<div id="av' + data.id[i] + '" class="avatar">' + data.avatar[i] + '</div>');   
             //   dropdivs(data.id[i]);
             //    };                         
          };    
     });
  };
getchatuser()

jsfiddle http://jsfiddle.net/guest271314/nqe44/

请参阅http://api.jquery.com/jQuery.ajax/

Answer 4

如何通过动画让div下拉？

我将示例重新创建为jsFiddle以测试该方案。

http://jsfiddle.net/ywYyR/6/

（第一次打开后再次按RUN）

function getchatuser() {
    $.ajax({
       type: "POST",
       url: "../echo/json/",
       data: {
           json: '{"id":[3,4],"avatar":["https://cdn2.iconfinder.com/data/icons/male-users-2/512/8-32.png","https://cdn2.iconfinder.com/data/icons/male-users-2/512/2-32.png"], "status" : "success"}',
        delay: 1
       },
       cache: false,
       dataType: 'json',
       async : false,
       success: function (dat, textStatus) {
          console.log(dat);
          if (dat.status == 'success') {
              //$("#useravatar").empty();
                 for (i = 0; i < dat.id.length; i++) {
                   $("#useravatar").prepend('<div id="av' + dat.id[i] + '" class="avatar"><img src="' + dat.avatar[i] + '" alt="" /></div>');


                   dropdivs(dat.id[i]);

                  }
           }
       },
        error: function(jqXHR,textStatus,errorThrown){
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
 }

这个小提琴做了以下事情：

一开始有2个用户。
进行ajax通话。
在ajax调用成功完成后，数据包含2个新用户。
将2个用户添加到HTML并为其设置动画。

我建议仔细检查：

请求返回时#useravatar div存在。
.avatar类的position值不是static。
您已添加了缓动jQuery库，以便easeOutBounce可用。

Answer 5

不是预先添加元素然后选择它，而只需使用prependTo()并在一行中执行这两项操作：

var dropDiv = $('<div id="av'+data.id[i]+'" class="avatar">'+data.avatar[i]+'</div>').prependTo("#useravatar");

Answer 6

您是否尝试过动态div的委托事件？

https://api.jquery.com/delegate/

不能在AJAX中使用成功函数的div

6 个答案: