Fadein()对函数的影响:如何实现？
Fadein()对函数的影响:如何实现？
提问于 2016-11-14 23:22:30
我有这个函数，可以很好地工作于延迟加载。
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转换为fadeOut，并将original.jpg淡入。
<img src="dot.png" data-src="original.jpg">http://jsfiddle.net/7s1yb1un/6/
提前感谢
回答 4
Stack Overflow用户
发布于 2016-11-14 23:58:49
这就是我所做的。
增加了一个fadeOut(5000)，原始资源的img会在5 sec之后淡出。调用了一个超时为6sec的函数，在5秒内用data-src和fadeIn(5000)改变了src，我希望这能解决你的问题。
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();
});Stack Overflow用户
发布于 2016-11-22 00:53:14
下面的代码将淡出，更改src，然后淡入。
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();
})
});Stack Overflow用户
发布于 2016-11-15 00:47:22
谢谢你们。我发现这个脚本(不知何故)起作用了，图像有时就会闪烁。我不知道语义上是否正确。
$(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);
})
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40592167
复制相关文章
相似问题