jQuery在邊界半徑內動畫div。阻止邊界半徑在動畫時丟失。小提琴

Question

我本來面對這個共同的問題...

stackoverflow.com/css-border-radius-not-trimming-image-on-webkit

所以我也跟着從問題的小提琴以上，解決了這個問題。

---

但後來我想徘徊時，動畫這個加價內一個div，所以我加入這個CSS和jQuery ...

但現在當我將鼠標懸停該元素，動畫發生我失去了所有的邊界半徑！

Aaaagghhh！爲什麼會發生這種情況！

看看它的實際發生http://jsfiddle.net/USd5s/439/

<span class="outer"> 
    <div class="outer"> 
     <div class="inner"> 
     </div> 
    </div> 
</span> 

\

span.outer{ 
    position:relative; 
    width: 100px; 
    height: 100px; 
    display: block; 
    cursor: pointer; 
    float: left; 
    margin: 15px 
} 

div.outer { 
    overflow:hidden;  
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    -webkit-border-radius: 6px; 
} 

.inner { 
    background:red; 
    height:100px; 
    width:300px; 
    position: relative; 
    background: #e6f0a3; 
} 

\

$("span.outer").hover(function() { 
    $(this).find('.inner').animate({ 
     left: '-200px' 
    }, 100, function() { 
     // Animation complete. 
    }); 
}, function() { 
    $(this).find('.inner').animate({ 
     left: '0' 
    }, 100, function() { 
     // Animation complete. 
    }); 
}); 

Answer 1

你忘了添加邊框喲你的外部div！

div.outer { 
    overflow:hidden;  
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    -webkit-border-radius: 6px; 
    border: white 2px solid; 
} 

對嗎？

演示：forked fiddle