Jquery 附加一个DIV并设置其动画 $（文档）.ready（函数（）{ 函数anima（）{ $（“.box”）.stop（）.animate（{bottom:'0px'}，{queue:false，duration:160}）； } $（'ul#aa img'）。悬停（函数（）{ $（this.parent（）.append（“ArtistMore”，anima（））； }，函数（）{ $（“.box”）.stop（）.animate（{bottom:'-100px'}，{queue:false，duration:160，complete:function（）{ $（'.box'）.remove（）；}）； });

我试图在悬停时添加一个div框，然后使其向上滑动（这部分可以工作），但在鼠标悬停时，我想将其向下设置动画并删除div（不工作，只是删除，不设置动画）

另外：

$（“#标题”，此）？

这将调用什么？设置此元素内的标题？

（-1用于代码格式设置。）

$（文档）.ready（函数（）{
函数anima（）{
$（“.box”）.stop（）.animate（{bottom:'0px'}，{queue:false，duration:160}）；
}
$（'ul#aa img'）。悬停(
函数（）{
$（this.parent（））
.append（“艺术家
更多”，anima（））；
}, 
函数（）{
$（“.box”）.stop（）
.animate（{bottom:'-100px'}，{queue:false，duration:160，complete:function（）{
$（'.box'）.remove（）；
}    
});
});

第二个函数（队列）在我看来很奇怪。

$（文档）.ready（函数（）{
$(document).ready(function(){
    function anima() {  
        $(".box").stop().animate({bottom:'0px'},{queue:false,duration:160});
    }


    $('ul#aa img').hover(
        function(){
            $(this).parent()
                   .append("<div class='box'>Artist<br/>More</div>", anima());
        }, 
        function() {
            $(".box").stop()
                     .animate({bottom:'-100px'},{queue:false,duration:160, complete:  function() {
                              $('.box').remove();
                         }    
        });
});

<ul id="aa">
    <li id="bb">
        <img src="delete.jpg"title="one|date|location|detail"/>
    </li>
</ul>

var标志=假；
$（'ul#aa img'）。悬停(
函数（）
{
if（$（this.next（）.length）==0）
{
$（this.parent（）.append（“艺术家
更多”）；
$（“.box”）.stop（）.animate（{bottom:'0px'}，{queue:false，duration:160}）；
}
}, 
函数（）
{
$（“.box”）.stop（）.animate（{bottom:'-100px'}{
队列：false，持续时间：1000，
完成：函数（）{
$（this.remove（）；
}
});
}
);
});

我明白了，在删除旧的div之前，每次悬停时，我都必须使用标志，并且它正在创建一个新的div。不确定是否可以在此处使用slideup/slidetoggle和queue属性

这不适用于多个

li

项目，但是，我需要无限数量的项目，如何为每个项目设置标志

---

编辑：您可以使用

if（$（this）.next（）.length）==0）而不是标志来检查div是否存在。我更新了代码。
$（'#caption'，this）；第二个参数是“context”。它在其中查找#caption（或您传入的任何内容）。请确保您回来后单击旁边的勾号，将此答案标记为已接受。
$(document).ready(function(){
    function anima() {  
        $(".box").stop().animate({bottom:'0px'},{queue:false,duration:160});
    }


    $('ul#aa img').hover(
        function(){
            $(this).parent()
                   .append("<div class='box'>Artist<br/>More</div>", anima());
        }, 
        function() {
            $(".box").stop()
                     .animate({bottom:'-100px'},{queue:false,duration:160, complete:  function() {
                              $('.box').remove();
                         }    
        });
});

<ul id="aa">
    <li id="bb">
        <img src="delete.jpg"title="one|date|location|detail"/>
    </li>
</ul>

$(document).ready(function(){ 
    var flag = false;

    $('ul#aa img').hover(
        function()
        {
           if(($(this).next().length)==0)
           {
             $(this).parent().append("<div class='box'>Artist<br/>More</div>");              
             $(".box").stop().animate({bottom:'0px'},{queue:false,duration:160});
           }
        }, 

        function()
        {
            $(".box").stop().animate({bottom:'-100px'},{
                queue:false,duration:1000, 
                complete:function() {
                    $(this).remove(); 
                }
            });
        }
    );
});