Question

    $(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)? 这叫什么？在这个元素中设置标题？

Answer 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，然后删除较旧的div。不确定你是否可以在这里使用带有队列属性的slideup / slidetoggle？

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

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

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

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

附加DIV并为其制作动画

2 个答案: