Question

我有div个班级.container。单击下一个按钮时，我希望.container从屏幕上滑落，当它离屏幕一半时，另一个div会淡入或滑入。我能够获得{{1}滑出屏幕，然后引入另一个div，但另一个div仅在div完全离开屏幕时出现（因为我正在使用它）完整的参数）。

.container

我发现如果我使用：

$( ".content" ).animate({
    left: '-875px',
}, {
    duration: 1000,
    complete: function() {
        showPage(page);
    }
});

我能够获得动画函数中“左”的某个值在某一点的所有值。因此，当我想要新的step: function(e) { console.log(e) }时，我可以确定动画的位置。虽然我无法将div函数放在步骤参数中。这有什么简单的方法吗？

谢谢。

Answer 1

您可以为div设置动画，但为第二个div设置延迟，这是第一个div的总动画时间的一半。因此，如果它是完整动画的一半，则另一个将开始。

我做了一个样本： http://jsfiddle.net/Yqu4A/2/

$("button").click(function() {
var dist = -($(".container").width());
$(".container").animate({
    "left":dist
}, 1000);
$(".container2").delay(500).animate({
    "opacity":1
},500);   
});

jQuery动画步骤属性

1 个答案: