2011-09-27 68 views
-12
$(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(不工作,只是刪除,不動畫)。追加DIV和動畫它

另外:$('#caption', this)? 這個調用是什麼?在這個元素內設置標題?

+0

$('#caption',this);第二個參數是'上下文'。它正在尋找這個(或者你傳入的任何東西)中的#caption。 http://api.jquery.com/jQuery/ – orolo

回答

2
$(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每次上了年紀的人之前已被刪除。不確定您是否可以在這裏使用slideup/slidetoggle與隊列屬性?

雖然這不適用於多個li項目,但我需要無限數量的項目,如何爲每個項目設置標誌?

編輯:而不是標誌,你可以使用if(($(this).next().length)==0)來檢查div是否存在。我更新了代碼。

+0

請確保您回來,並通過點擊旁邊的勾號將此答案標記爲已接受。 – ghostJago

0

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

那第二個函數(隊列)看起來很奇怪,我。