Question

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

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

修改

图像都有不同的宽度。

Answer 1

在jQuery中我猜你不能在半途中设置coordnate，只能在半场动画中设置以启动新的

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

在css中使用带过渡的动画，你可以实现

Answer 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。

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

2 个答案: