在jQuery上添加一個DIV下面的DIV

Question

我目前有一個mouseover/mouseout事件 - 我想在mouseover上完成動畫後顯示div，並在mouseout之前的動畫開始前隱藏div。

我不能讓它顯示相對於動畫後顯示的div，或正確排隊。

http://jsfiddle.net/q2Fh7/

Answer 1

您需要使用的animate()回調函數參數的message DIV追加到相關box。你也應該使用hover。試試這個：

$('.box').hover(
    function() { 
     var $box = $(this); 
     $box.stop().animate(
      { width: '280px', height: '420px'}, 
      650, 
      function() { 
       var $div = $("<div></div>").addClass("message").text("Message text"); 
       $box.append($div); 
       $div.fadeIn(); 
      } 
     ); 
    }, 
    function() { 
     var $box = $(this); 
     $(".message", $box).fadeOut(function() { 
      $box.stop().animate({ width: '100px', height: '100px' }, 650); 
     });   
    } 
); 

Example fiddle

Answer 2

我認爲這不正是你想要的。但我想，這將讓你在正確的道路上： http://jsfiddle.net/r6xbp/

編輯：優化 http://jsfiddle.net/r6xbp/2/