Question

正如标题所述，我试图使用jquery .animate（）将方形div动画为梯形。但是，我得到的唯一动画是宽度调整，我不太清楚为什么会出现这种情况。

$(function () {
    $('.square').hover(function () {
        $(this).animate({
            borderRight: '100px solid red',
            borderTop: '50px solid transparent',
            borderBottom: '50px solid transparent',
            height: '100px',
            width: '0'
        });
    });
});

div.square {
    height: 100px;
    width: 100px;
    background-color: red;
}
div.left {
	border-right: 100px solid red;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	height: 100px;
	width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>


<div class="left"></div>

Answer 1

我会使用类和css转换：

＆＃13;

$(function () {
    $('.square').hover(function () {
        $(this).removeClass('square').addClass('left');
    });
});

＆＃13;

div.square {
    height: 100px;
    width: 100px;
    background-color: red;
}
div.left {
    border-right: 100px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    height: 100px;
    width: 0;
    
    -webkit-transition: all  500ms ease-out;
    -moz-transition: all  500ms ease-out;
    -o-transition: all  500ms ease-out;
    transition: all 500ms ease-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>

＆＃13;

动画方形div为梯形

1 个答案: