Question

我来自阿根廷，我有一个问题，希望你能帮助我。

我正在创建一个滑块，但我遇到以下代码的问题。

var tmpImg = new Image() ;
tmpImg.src ='http://mlm-s1-p.mlstatic.com/reloj-movado-movimien-de-cuarzo-con-caja-dorada-y-tapa-acero-4269-MLM4903532600_082013-F.jpg';


tmpImg.onload = function() {

var alto =tmpImg.height;
var largo =tmpImg.width;

$("#foto").animate({

width: largo,
height:alto,

},

{
    duration: 500,

 step: function(){     

$('#foto').css({
               position:'absolute',
               left: ($(window).width() - $('#foto').outerWidth())/2,
               top: ($(window).height() - $('#foto').outerHeight())/2
          });
    }
});

$("#foto").append(tmpImg);

    } ;

唯一令我感兴趣的是动画完成后加载foto。

$("#foto").append(tmpImg);

对不起英语，非常感谢你。

Answer 1

您需要在展示之前预先加载照片。 JQuery示例：

$(new Image()).attr('src', '/img/preload_me_plz.jpg').load(function() {
            alert('i am ready!');
        });

Answer 2

您可以使用complete选项执行此操作：

$("#foto").animate({

width: largo,
height:alto,

},

{
    duration: 500,

 step: function(){     

$('#foto').css({
               position:'absolute',
               left: ($(window).width() - $('#foto').outerWidth())/2,
               top: ($(window).height() - $('#foto').outerHeight())/2
          });
    },

  complete: function (){
     $("#foto").append(tmpImg);
  }
});

Answer 3

这里我给出了动画完成后执行函数的示例代码。可能有用

$( "#clickme" ).click(function() {
      $( "#book" ).animate({
        opacity: 0.25,
        left: "+=50",
        height: "toggle"
      }, 5000, function() {
        // Here animation complete. You can write your code here.
      });
    });

jquery延迟图像动画

3 个答案: