Vraag Fadein () effect op een functie: hoe?


Ik heb deze functie die goed werkt voor lui laden.

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

Hoe kan ik een geven fadeIn() effect op die removeAttr-functie?
Ik heb geprobeerd:

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

maar het werkt niet. De img code ziet er zo uit en ik wil gewoon dat de dot.png naar fadeOut en het original.jpg verdwijnen.

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

http://jsfiddle.net/7s1yb1un/6/
Bij voorbaat bedankt


18
2017-11-14 15:22


oorsprong


antwoorden:


U kunt een src-wijziging niet vervagen op een img element. Om dit te bereiken heb je er twee nodig img elementen. De tweede heeft een src "original.jpg" en zal een hoger hebben z-index en begin met display: none voor een stijl. Dan kun je het laten vervagen en het zal over de stip vervagen.

BEWERK Met uw nieuwe vraag kunt u het volgende doen:

  1. Voeg een toe onload luisteraar voor het beeld
  2. Vlak voor het veranderen van de "src", vervaagt de afbeelding
  3. Verander dan de "src" in "original.jpg"
  4. In uw onload functie, doe a fadeIn

10
2017-11-14 15:26



Dit is wat ik heb gedaan.

Toegevoegd een fadeOut(5000), de img met originele src verdwijnt daarna 5 sec. Heeft een functie met time-out van aangeroepen 6sec, wat het src met data-src en fadeIn(5000) in 5 seconden hoop ik dat dit je probleem oplost.

JS-code is hieronder

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

5
2017-11-14 15:58



De volgende code zou vervagen, de bron wijzigen en vervolgens weer verdwijnen.

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

2
2017-11-21 16:53



Bedankt jongens. Ik vond dit script aan het werk (op een of andere manier), de afbeeldingen knipperen soms. Ik weet niet of dit semantisch correct is.

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

0
2017-11-14 16:47



De volgende code zou de afbeeldingen klonen die de data-src attribuut, verberg dan de kloon, update de kloon src, plaats het boven de originele afbeelding en vervaag het. Zou dit voor u werken?

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

0
2017-11-21 16:46