Fadein() 对函数的影响：如何？答案

【问题标题】：Fadein() effect to a function: how to?Fadein() 对函数的影响：如何？
【发布时间】：2017-03-28 07:01:00
【问题描述】：

我有这个功能非常适合延迟加载。

panel.find('img[data-src]').each(function(){
            element = $(this);
            element.attr('src', element.data('src'));
            element.removeAttr('data-src');

如何为 removeAttr 函数赋予fadeIn() 效果？
我试过了：

element.removeAttr('data-src').fadeIn();

但它不起作用。 img 代码看起来像这样，我只是想让 dot.png 淡出，而 original.jpg 淡入。

<img src="dot.png" data-src="original.jpg">

http://jsfiddle.net/7s1yb1un/6/
提前致谢

【问题讨论】：

你真正想要实现什么？
@NiranjanKumar 正如我所说的，我希望 src 淡出，当 img 出现时，data-src 淡入。
在 jsfiddle 中发帖
@NiranjanKumar 这里是：jsfiddle.net/7s1yb1un/6
jsfiddle.net/s2194r8L 试试这个

标签： javascript jquery fadein fadeout

【解决方案1】：

您不能淡化 img 元素上的 src 更改。要实现这一点，您需要两个 img 元素。第二个将具有 src "original.jpg" 并将具有更高的 z-index 并以 display: none 开头作为样式。然后你可以将它淡入，它会在点上淡入。

编辑鉴于您的新问题，您可以执行以下操作：

为图片添加onload监听器
就在更改“src”之前，将图像淡出
然后把“src”改成“original.jpg”
在您的onload 函数中，执行fadeIn

【讨论】：

src的不透明度0和data-src的不透明度1不能玩吗？
@Federico 你试过我编辑的答案了吗？它应该完全符合您的要求
我不知道如何正确实现它：/

【解决方案2】：

这是我所做的。

添加了fadeOut(5000)，原来src的img会在5 sec之后淡出。调用了一个超时为6sec 的函数，它在5 秒内将src 更改为data-src 和fadeIn(5000)，希望这能解决您的问题。

JS代码如下

var myVar;
function myFunction() {
    myVar = setTimeout(function(){ 
        var src = $("img.hide").attr("data-src");
        $("img.hide").attr("src",src);
        $("img.hide").fadeIn(5000); 
    }, 6000);
}

function myStopFunction() {
    clearTimeout(myVar);
}

$(document).ready(function() {
  $(".hide").fadeOut(5000);
  myFunction();  
});

【讨论】：

【解决方案3】：

谢谢各位。我发现这个脚本工作（不知何故），图像有时会闪烁。我不知道语义是否正确。

$(function() {
$('img').one("load", function() {
var e = $(this);
e.data('src', e.attr('data-src'));
e.animate({"opacity": 0}, 400);
e.data('src');
e.animate({"opacity": 1}, 400);
})
});

【讨论】：

【解决方案4】：

以下代码将克隆具有data-src 属性的图像，然后隐藏克隆，更新克隆src，将其放置在原始图像上，然后淡入。这对您有用吗？

JSFiddle

HTML

<div id="fullpage">
  <div class="section">
    <img class="fadeable" src="http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=800" data-src="http://2.gravatar.com/userimage/5/ff5263e8c30557b57e64423ee8496e41?size=800" width=100 height=100 alt="smile"></div>
</div>

JS

$(function() {
  $('img[data-src]').each(function(i, e) {
    // cache element
    original_img = $(e);
    // get position of original image
    offset_left = original_img.offset().left;
    offset_top = original_img.offset().top;
    // get data-src of
    data_src = original_img.attr('data-src');
    // clone original image
    original_img.clone()
    .hide()
    // put it directly in the body, so it can be positioned
    .appendTo('body')
    // set the new src
    .attr('src', data_src)
    // place it over the original image
    .css({
        "left": offset_left,
      "top": offset_top,
      "position": "absolute"
    })
    .fadeIn(function(){
        original_img.attr('src', data_src);
        $(this).remove();
    });
  })
});

【讨论】：

【解决方案5】：

下面的代码会淡出，改变src，然后淡入。

JSFiddle

HTML

<div id="fullpage">
  <div class="section">
    <img class="fadeable" src="http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=800" data-src="http://2.gravatar.com/userimage/5/ff5263e8c30557b57e64423ee8496e41?size=800" width=100 height=100 alt="smile"></div>
</div>

JS

$(function() {
  $('img[data-src]').each(function(i, e) {
    // cache element
    original_img = $(e);
    original_img
    .fadeOut(function(){
      original_img.attr('src', original_img.attr('data-src'))    
    })
    .fadeIn();
  })
});

【讨论】：