javascript - Jquery/Javascript 动画问题

Question

嗨，我有一个宽度随着 jquery 增加的 div。我想当宽度达到 100% 时做某事

$(function() {

  $('.play').click(function() {

    $('.loader').animate({
        width: "100%"
    },1500);
    $('.video img').attr('src','css/images/movie-click.jpg')
    $(this).hide();

    if($('.loader').width()==$('.video img').width()) {

        $('.video img').attr('src','css/images/movie.jpg')
    }

});

if 语句中的某些内容不正确。如果有人可以帮助我。我的想法是检查 with 是否为 100%，如果是，则一切恢复正常。（播放要显示，宽度 = 0%，img attr 不同。）

Answer 1

动画完成后，使用complete回调 inanimate执行代码：

$('.play').click(function () {
    $('.loader').animate({
        width: "100%"
    }, 1500, function() {
        // any code here will run only after the animation is complete
        $('.video img').attr('src', 'css/images/movie.jpg');   
    });
    // any code here will run as soon as the animation starts,
    // before it's completed
});

Answer 2

click 函数中的代码只调用一次，因此您的 if 语句在动画时不会连续运行。相反，只需在完成后将该逻辑添加到回调中.animate()：

$('.loader').animate({
    width: "100%"
},1500,swing, function() {
     $('.video img').attr('src','css/images/movie.jpg');
});

Answer 3

if 语句中的某些内容不正确

确实 :-) 您当前的代码只是比较了两个.width()调用返回的 css 值——这当然是错误的。

这不是你等待动画的方式。动画代码是异步的，您的animate()调用只是启动动画但立即返回（并继续隐藏按钮并评估条件）。

相反，将回调函数传递给animate，它将在动画完成时执行：

$(function() {
    $('.play').click(function() {
        $(this).hide();

        var $img = $('.video img');
        $img.attr('src','css/images/movie-click.jpg');

        $('.loader').animate({
            width: "100%"
        }, 1500, function() {
            // executed after the animation
            $img.attr('src','css/images/movie.jpg');
        });
    });
});