如何使用 jquery 动画触发图像位置更改事件？答案

【问题标题】：How do I trigger an event on image position change using jquery animations?如何使用 jquery 动画触发图像位置更改事件？
【发布时间】：2013-12-14 01:27:46
【问题描述】：

我正在使用 jquery 将图像从屏幕的一侧移动到另一侧，当图像在其动画期间（大约中途）到达某个位置时，我想调用另一个动画。如何在动画期间获取坐标？我正在创建一个简单的图像幻灯片，它将图像从一侧移动到另一侧。我会将它们全部放在屏幕外，当第一个图像超过起点时，我想开始为第二个图像设置动画，依此类推。我不是在寻找快速的解决方案，而是在询问如何为 jquery 通过动画操作的对象设置事件处理程序。任何一个都是受欢迎的。

$( ".slideshowImages" ).click(function() {
     $( ".slideshowImages" ).animate({
     "margin-left": "-=1300",
     }, 10000, function() {
              // Animation complete.
     });
});

编辑

图像都有不同的宽度。

【问题讨论】：

标签： jquery animation jquery-animate

【解决方案1】：

在jQuery中我猜你不能在中途设置坐标，只能在中途动画中设置开始新的动画

第一个动画持续 3 秒第二次在 1,5 开始

在 css 中使用带有过渡的动画，您可以实现这一点

【讨论】：

如果图像都具有相同的宽度但宽度随每个图像而变化，我可以这样做。我想保持图像之间的距离相等，所以这对我来说真的不起作用。
是的，我明白了，所以我投票支持这个问题，因为我前段时间一直在寻找同样的问题。和平

【解决方案2】：

我不太清楚你想要实现什么，但没有“对象被 jquery 通过动画操作”的事件处理程序。只有一种方法可以检查元素是否正在动画：

if($(elemement).is(':animated')) {/*do something*/}

您所指的坐标是什么，是图像的左侧和顶部offset() 位置吗？在 jQuery animate() 中有一个 step 函数，一个在动画的每一步都会触发的回调函数。如果图像的当前位置大于或小于，这可以帮助您检查并设置条件，但不要使用等于 '==' 不能保证在某个步骤上将返回等于您的值正在比较。

在 jsfiddle 上测试它。

我制作了一个简单的滑块，它可能与您正在尝试做的事情相似，并且可以帮助您开始工作。

html 标记：

<div id="sliderWindow">
    <img class="slideshowImages" src="" />
    <img class="slideshowImages" src="" />
    <img class="slideshowImages" src="" />
</div>

CSS：

#sliderWindow {
background:#333;
position:relative;
width:300px;
height:100px;
margin-left:100px;
overflow:hidden;
}

.slideshowImages {
position:absolute;
left:100%;
opacity:1;
}

jQuery:

//function that calculates the left value to center the img
function center(el) {
    return ($('#sliderWindow').width() / 2) - (el.width() / 2)
}

//center the first img
var $first = $('.slideshowImages:first');
$first.css({'left': center($first)});
//set the duration of animate
var duration = 1000;

$('.slideshowImages').click(function () {
    var $this = $(this),
        //distance traverse from current position until completely hidden
        distance = $this.width() + center($this),
        //get the speed 
        speed = distance / duration,
        /*calculate the duration if it's only to travel 
          half it's left margin at the same rate
        */
        halfway = (center($this) / 2) / speed;

    $this.animate({
        'left': -Math.abs($this.width()) //hide on the left
    }, duration);

    //halfway, trigger animate on the next img
    setTimeout(function () {
        $this.next().animate({
            left: center($this.next())
        }, duration);
    }, halfway);
});

这里是jsfiddle。

【讨论】：