Question

我正在转换div的背景位置，从左到右改变颜色。一旦位置更改完成，我想在JQuery中执行另一个操作来更改#event_2元素的填充：

<div class='event' id='event_1'></div>
<div class='connector' id='connector_1'></div>
<div class='event' id='event_2'></div>

$('#event_2').click(function(){
        $('#connector_1').css('background-position', '80px 0px');
        myPos = $('#connector_1').css("background-position").split(" ");
        if(myPos[0] == '100%'){
        $(this).css({'background': '#7b9d6f', 'border-color': '#7b9d6f'});
        }
    });

当事件被触发时，

myPos返回[0％，100％]，那么当myPos [0]为100％时我该如何监听？

小提琴在https://jsfiddle.net/sL156k3t/

Answer 1

你可以这样做......

创建一个使其处于活动状态的类（更改其BGcolor）并在其上设置转换延迟。

.active{
    background: #7b9d6f;
    border-color: #7b9d6f;
    transition-property: all;
    transition-delay: 2s;
}

然后像你一样删除JS中的条件

$('#event_2').click(function(){
    $('#connector_1').css('background-position', '80px 0px');
    //myPos = $('#connector_1').css("background-position").split(" ");
    $(this).addClass('active');
});

LIVE DEMO

Answer 2

您可以使用在管道动画完成时运行的回调函数。

JQuery - 在后台位置更改后执行操作

2 个答案: