附加一个 DIV 并为其设置动画答案

【问题标题】：append a DIV and animate it附加一个 DIV 并为其设置动画
【发布时间】：2011-11-26 07:09:04
【问题描述】：

    $(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>

我正在尝试在悬停时添加一个 div 框，然后让它向上滑动（这部分有效），但是在鼠标移出时我想对其进行动画处理并删除 div（不起作用，只是删除，不动画）。

还有：$('#caption', this)? 这叫什么？在此元素内设置标题？

【问题讨论】：

$('#caption', this);第二个参数是“上下文”。它正在其中寻找#caption（或您传入的任何内容）。 api.jquery.com/jQuery

标签： jquery

【解决方案1】：

$(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(); 
                }
            });
        }
    );
});

我想通了，我必须使用标志，并且每次悬停时都会创建一个新的 div，然后删除旧的。不确定是否可以在此处使用带有 queue 属性的 slideup/slidetoggle？

这不适用于多个li 项目，但我需要无限数量的项目，如何为每个项目设置标志？

编辑：您可以使用if(($(this).next().length)==0) 来检查 div 是否存在，而不是标志。我更新了代码。

【讨论】：

请确保您回来并通过单击旁边的勾号将此答案标记为已接受。

【解决方案2】：

（-1 用于代码格式化。）

$(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>

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

【讨论】：