Question

我对jQuery-ui的'scale'效果有点问题。当我隐藏元素（在这种情况下，一个红色正方形）时，它从顶部到中间，从底部到中间，直到它消失，但是，当我想显示它时，它只是从垂直和水平扩展中间和中心。关于隐藏和显示时如何进行相同动画的任何线索？

以下是代码和小提琴：

HTML：

<div id="container" style="position: relative;"></div>
<button onclick="init2();"><<</button>
<button onclick="init();">>></button>

JS：

function init()
{
    $('#container').show('scale', {direction: 'horizontal', origin: ['middle', 'center']}, 2000);
}

function init2()
{
    $('#container').hide('scale', {direction: 'vertical'}, 2000);
}

http://jsfiddle.net/yd1y6cbr/6/

Answer 1

UI在这种效果中似乎有些错误..（它无法垂直向上扩展）

但你可以使用CSS转换（比jquery UI更好的解决方案）

＆＃13;

$('.hide').on('click', function() {
  $('#container').addClass('off');
});

$('.show').on('click', function() {
  $('#container').removeClass('off');
});

＆＃13;

#container {
  background-color: red;
  width: 300px;
  height: 300px;
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  -ms-transition: -ms-transform 2s;
  -o-transition: -o-transform 2s;
  transition: transform 2s;
}
.off {
  -webkit-transform: scaleY(0);
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -o-transform: scaleY(0);
  transform: scaleY(0);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="container" style="position: relative;"></div>

<button class="hide">&lt;&lt;</button>
<button class="show">&gt;&gt;</button>

＆＃13;

http://jsfiddle.net/gaby/tcqjuf7j/

尝试使用jQuery从中间扩展

1 个答案: