边界半径内的 jQuery 动画 div。阻止边界半径在动画中丢失。 fiddle

Question

我本来就面临这个常见问题...

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

所以我按照上面的问题解决了这个问题。

---

但是后来我想在鼠标悬停时为这个标记内的 div 设置动画，所以我添加了这个 css 和 jquery...

但是现在当我将鼠标悬停在这个元素上时，动画开始了，我失去了所有的边框半径!

啊啊啊!为什么会这样!？？

亲 body 验 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