【问题标题】:jQuery animate on an image replacement图像替换上的 jQuery 动画
【发布时间】:2011-02-14 05:36:01
【问题描述】:

希望您能建议我想在图像替换中添加一些简单的淡入淡出,我已将其挂接到选择菜单中。即,

$("#vehicle").change(function(){
    var selected = $(this).val();
    $("#selectedVehicle").attr('src', '/assets/images/mini/'+selected+'.png');
});

<img id="selectedVehicle" src="/assets/v2/images/select-vehicle.png">

有什么建议吗?

【问题讨论】:

    标签: jquery image animation


    【解决方案1】:

    如果您预加载图像,这将最有效。

    $("#vehicle").change(function(){
        var selected = $(this).val();
        var image = $("#selectedVehicle");
        image.fadeOut('fast', function () {
            image.attr('src', '/assets/images/mini/'+selected+'.png');
            image.fadeIn('fast');
        });
    });
    

    这将使图像淡出,更改src,然后将其淡入。参考jQuery docs了解有关淡入淡出功能的更多信息。

    同样,您应该预先加载您的图像,否则它可能会在加载时淡出。

    【讨论】:

    • 如果我在 img fadeIn/fadeOut 之间夹入一个动画加载 gif 淡入/淡出,这样我就不会预加载图像,并在图像完全加载时淡入图像,这会是一件有意义的事情吗加载了吗?
    【解决方案2】:

    我已经开始在页面加载时预加载图像,而不是在运行中...:

    $(document).ready(function () {
      function buildUrl(val) {
        return '/assets/images/mini/' + val + '.png';
      };
    
      $('#vehicle').change(function () {
        var value = $(this).val();
    
        $('#selectedVehicle').fadeOut('fast', function () {
          $(this).attr('src', buildUrl(value)).fadeIn('fast');
        });
      }).children('option').each(function () {
        var img = document.createElement("img");
    
        img.src = buildUrl($(this).val());
        img.onload = function () {};
      });
    });
    

    【讨论】:

      【解决方案3】:

      “加载”事件示例:

      $("#vehicle").on('change', function(){
        var selected = $(this).val();
        var image = $("#selectedVehicle");
        image.fadeOut('fast', function () {
           image.attr('src', '/assets/images/mini/'+selected+'.png');
        });
        image.one("load",function(){
          image.fadeIn('fast');
        });
      });
      

      【讨论】:

      • image.on("load",function(){ image.fadeIn('fast'); });
      • Krishna Karki,你能评论一下为什么使用.on 更好吗?
      • 我认为她认为是错字,但实际上并非如此......https://api.jquery.com/one/
      猜你喜欢
      • 2014-05-03
      • 2011-03-11
      • 2011-06-29
      • 1970-01-01
      • 1970-01-01
      • 2018-03-27
      • 2012-06-23
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多