jquery - jQuery HTML CSS 効果

Question

jQuery / HTML / CSS のみを使用して、ブロック要素の左下隅から右上隅への斜めの遷移をアニメーション化できます。ブロックがいっぱいになるまでの遷移期間を三角形で埋めますか?

CSS3トランジションをサポートしていないブラウザーを使用しているユーザーがいるため、私はこれを求めています。理想的には、これは Chrome と IE8+ の両方で機能します。

時間が経って、これは私が得たものです：

IE8+ で動作 | クローム | ファイアフォックス

http://jsfiddle.net/yYK9b/

CSS

div.arrow {
    width: 0; 
    height: 0; 
    border-left: 0px solid transparent;  /* left arrow slant */
    border-right: 50px solid transparent; /* right arrow slant */
    border-bottom: 50px solid #bb0000; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
    bottom: 0;
    position: absolute;
}
div.cover {
    width: 0; 
    height: 0; 
    border-left: 0px solid transparent;  /* left arrow slant */
    border-right: 50px solid transparent; /* right arrow slant */
    border-bottom: 50px solid #FFF; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
    bottom: -1px;
    left: 0px;
    z-index: 100;
    position: absolute;
}
div.topLeft {
    overflow: hidden;
    position: absolute;
    height: 300px;
    width: 300px;
    border: 1px solid #bb0000;
}
div.topRight {
    overflow: hidden;
    position: absolute;
    left: -2px;
    top: -2px;
    height: 300px;
    width: 300px;
    border: 1px solid #bb0000;
}
div.wrap {
    overflow: hidden;
    position: absolute;
    height: 300px;
    width: 300px;
    border: 0px solid #bb0000;
}

HTML

<div class="wrap">
    <div class="topLeft"></div>
    <div class="topRight"></div>
    <div class="cover"></div>
    <div class="arrow"></div>
</div>

JQuery

$(".wrap").hover(function(){
        arrow = $(this).find(".arrow");
        $(arrow).stop().animate({
            borderBottomWidth: "600px",
            borderRightWidth: "600px"
        }, 500)
},function(){
        arrow = $(this).find(".arrow");
          $(arrow).stop().animate({
            borderBottomWidth: "50px",
            borderRightWidth: "50px"
        }, 500)  
});