破動畫（）算法

Question

HTML

<ul class="wrap"> 
    <li title="Lorem ipsum dolor sit amet"></li> 
    <li title="consectetur adipisicing elit"></li> 
    <li title="incididunt ut labore et dolore magna aliqua"></li> 
    <li title="Ut enim ad minim veniam"></li> 
    <li title="quis nostrud exercitation ullamco"></li> 
    <li title="laboris nisi ut aliquip ex ea commodo"></li> 
    <li title="Duis aute irure dolor in reprehenderit"></li> 
    <li title=" Excepteur sint occaecat cupidatat non"></li> 
    <div class="sub"> 
     <div class="bg"></div> 
    </div> 
</ul> 

CSS

*{ 
    padding: 0; 
    margin: 0; 
    border: none; 
} 

body{ 
    padding: 100px; 
} 


ul{ 
    list-style: none; 
    overflow: hidden; 
    position: relative; 
} 

li{ 
    width: 220px; 
    height: 220px; 
    background: rgba(0, 0, 0, 0.6); 
    position: relative; 
    overflow: hidden; 
    cursor: pointer; 
    float: left; 
    margin-right: 20px; 
    margin-bottom: 20px; 
    display: block; 
} 

.sub{ 
    width: 210px; 
    height: 210px; 
    background: #ff3030; 
    color: #fff; 
    padding: 5px; 
    position: absolute; 
    display: none; 
} 

JQUERY

var li = $('.wrap').children('li'), 
    sub = $('.sub'); 

li.on('mouseover', function() { 
    sub.show(); 
    var left = $(this).offset().left, 
     top = $(this).offset().top, 
     text = $(this).attr('title'), 
     bg = $('.bg'); 
    sub.stop().animate({ 
     left: left - $('.wrap').offset().left, 
     top: top - $('.wrap').offset().top 
    }); 
    bg.stop().animate({ 
     opacity: 0 
    }, function() { 
     bg.text(text); 
     bg.animate({ 
      opacity: 1 
     }); 
    }); 
}).on('mouseleave', function() { 
    sub.fadeOut(); 
}); 

這是小提琴 http://jsfiddle.net/GTHM4/

它BETT呃看起來全寬 http://jsfiddle.net/GTHM4/embedded/result/

正如你所看到的問題是「破」工作「鼠標離開」事件，以及格「BG」總是「想要」去了......怎麼了？

Answer 1

它工作正常

var li = $('.wrap').children('li'), 
      sub = $('.sub'), 
    wrap = $('.wrap'); 

     wrap.on('mouseover','li', function() { 
      sub.show(); 
      var left = $(this).offset().left, 
       top = $(this).offset().top, 
       text = $(this).attr('title'), 
       bg = $('.bg'); 
      sub.stop().animate({ 
       left: left - $('.wrap').offset().left, 
       top: top - $('.wrap').offset().top 
      }); 
      bg.stop().animate({ 
       opacity: 0 
      }, function() { 
       bg.text(text); 
       bg.animate({ 
        opacity: 1 
       }); 
      }); 
     }).on('mouseleave', function() { 
      sub.fadeOut(); 
     }); 

演示http://jsfiddle.net/fazalrasel/GTHM4/1/