当Div应用Transition时，使用JQuery设置di​​v的位置

Question

我已将CSS transition: all 1s ease-in-out;应用于定位absolute的{​​{1}}现在我点击按钮时重置DIV的位置，div设置正确，但是绝对定位div内有一个小div，设置不正确。以下是我的代码（FIDDLE）：

  

如果删除了转换，指针将设置在所需的位置   CSS

HTML：

div

JS：

<div class="target">Here</div>
<div class="mobile">
    <div class="wrapper">
        <div class="traingle"></div>
    </div>
</div>

CSS：

$('.target').on('click',function(){
    var position= $(this).offset(),
    widt = $(this).outerWidth(),
    heigh = $(this).outerHeight();

    $('.mobile')
    .offset({
        left:position.left+widt-350,
        top:(position.top+heigh+20)
    });
    $('.traingle')
    .offset({
        left:position.left-7+(widt/2)
    });
});

这是fiddle，

  

如果删除过渡效果，指针将正确设置。

Answer 1

我修改了一下。

$('.target').on('click',function(){
var position= $(this).offset(),
widt = $(this).outerWidth(),
heigh = $(this).outerHeight();
$('.mobile').css('top',(position.top+heigh+20))
.animate({
    left:position.left+widt-350,        
},1000,function(){
    $('.traingle')
.offset({
    left:position.left-7+(widt/2)
});

});

}）;

您可以使用jquery动画功能代替CSS过渡吗？通过使用动画，您可以完成该任务。这是一个链接：http://jsfiddle.net/lotusgodkk/73s2c/4/

这可能不完美，但你仍然可以努力改善它。