Jquery/Javascript动画问题_Javascript_Jquery

Jquery/Javascript动画问题

javascript jquery

Jquery/Javascript动画问题,javascript,jquery,Javascript,Jquery,嗨，我有一个div，它的宽度是用jquery增加的。我想当宽度达到100%时做点什么 $(function() { $('.play').click(function() { $('.loader').animate({ width: "100%" },1500); $('.video img').attr('src','css/images/movie-click.jpg') $(this).hide(); if($('.loa

嗨，我有一个div，它的宽度是用jquery增加的。我想当宽度达到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不同。）

使用

完成

回调在动画完成后执行代码：

$('.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
});

动画完成后，使用中的

complete

回调执行代码：

$('.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
});

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

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

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

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

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

事实上：-）您当前的代码只是比较两个

.width（）

调用返回的css值，这当然是错误的

这不是等待动画的方式。动画代码是异步的，您的

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');
        });
    });
});