jQuery HTML CSS-эффекты

Question

Можно использовать только с помощью jQuery/HTML/CSS для анимации диагонального перехода элемента блока из нижнего левого угла в верхнее правое. Итак, треугольная форма заполняет переходный период до заполнения блока?

Я после этого, поскольку у меня есть пользователи с браузерами, которые не поддерживают переходы CSS3. В идеале это будет работать как в Chrome и IE8 +

После времени, это то, что я получил:

Работает в IE8 + | Хром | Firefox

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) 
}); 

Answer 1

Это должно быть возможно. Допустим, у вас есть блок, который является квадратом, с overflow: hidden. то у вас есть внутренний квадрат внутри этого, абсолютно расположенный за пределами экрана, так сказать. Используя свойство jquery animate, вы можете анимировать положение внутреннего блока, чтобы он перемещался в положение 0px/0px

Мне было слишком ленив, чтобы создать изображение, но вы могли бы устранить собственные правила CSS, если бы вы использовали изображение вместо использования CSS для поворота квадрата, как в примере.