Question

我正在玩jquery，我遇到了一个问题。

我希望在其容器悬停时为其设置动画，以便每次容器悬停时，应将盒子（初始状态1）重置为某个位置（比如状态2），然后设置为所需位置的动画（比如状态3）。

HTML

<div id="box-container">
    <div id="box"></div>  
</div>

CSS

#box-container {
    padding : 10px;
    border : 1px solid #f00;
}

#box {
    display: inline-block;
    background : #fff;
    padding:50px;
    border: 1px solid #ddd;
    transform : translateX(150px);
}

JS

$("#box-container").hover(function(){
    console.log("hover in");
    $("#box").css({
        transform : 'translateX(0px)',
        transition : 'initial'
    }).css({
        transform:'translateX(100px)',
        transition : 'transform 0.5s linear'
    });

},function(){
    console.log("hover out");
});

但这种方法不起作用。框直接从state 1 -> state 3开始并被卡住。我发现css()无法在jquery中排队为animate()

工作模式1 =＆gt; JSfiddle

所以我试图打破链条并尝试通过这样做来增加一些延迟

$("#box").css({
    transform : 'translateX(0px)',
    transition : 'initial'
});

setTimeout(function(){console.log("delay")}, 1000);
var x = 4;
console.log("delay");

$("#box").css({
    transform:'translateX(100px)',
    transition : 'transform 0.5s linear'
});

但是这个没有用，所以我尝试了delay()，这是第一次正常工作。但在第二次盒子被困在左边

工作模式2 =＆gt; JSfiddle

最后我尝试在第一次更改（state 2）之后记录框的（转换，填充，转换等）的css值

console.log($("#box").css('transform'));

并以某种方式它正在工作，因为我希望它工作

工作模式3 =＆gt; JSfiddle correct

所以我想知道为什么读取css值会得到所需的输出

实现此输出的好方法是什么state 1 (hover)-> state 2 -> state 3 (hover)-> state 2 -> state 3

所有链接在chrome（最新版本）上检查都正常。

Answer 1

除非您刚刚使用转换属性，否则您可以使用jQuery动画来移动元素。

修改后的CSS：

$("#box-container").on('mouseover',function(){

  $('#box').animate({
      left: "0"
    }, 10, function(){

    }).animate({
      left: "100"
    }, 300, function(){

    });

}).on('mouseout',function(){

  $('#box').animate({
    left: "150"
  }, 0, function(){

  });

});

修改过的JavaScript

{{1}}

忽略了使用css方法的Jquery链接

1 个答案: