animiert-Bild-Attribut ändern

 $(function() {
    $(".flexslider img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "-bw.png";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-bw.png", ".png");
            $(this).attr("src", src);
        });
    });

Ich habe ein Karussell, das erscheint auf den meisten Seiten ein wordpress-theme, die ich ändern muß jedes Bild in jedem Karussell eine neue attr beim mouseover das ist die alte src - + - bw oder ein suffix. Aber das muss tween oder zu animieren. Der obige code ändert sich das Bild aber nicht animieren. Auch viele Leute vor dem laden des Bildes zu sein, offenbart sich auf schweben?

InformationsquelleAutor gilesadamthomas | 2012-05-28

  1. 5

    Welche Art von animation, die Sie benötigen? Fading?

    $(function() {
    $(".flexslider img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "-bw.png";
            $(this).fadeOut("fast").attr("src", src).fadeIn("fast");
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-bw.png", ".png");                
            $(this).fadeOut("fast").attr("src", src).fadeIn("fast");
        });
    });
    danke bram, das ist perfekt!
    Du bist herzlich willkommen.
    dieser code oben ersetzt das Attribut zuerst, dann ausklingt, dann in . | hier ist besser, eine $('#ch').fadeOut(140, function(){ $(this).attr('src','http://tinyurl.com/l3udnfd').fadeIn(140); fadoOut() nimmt die Funktion als zweiten parameter auf: Beispiel

    InformationsquelleAutor Bram Vanroy

  2. 0

    Würden Sie brauchen, um ein cross-fade, hier wird es erklärt:

    http://jqueryfordesigners.com/image-cross-fade-transition/

    Könnte man etwas wie das hier tun:

    crossFade = function(element, to_src) {
   element = $(element); //maybe this isn't even needed.
   element.style = "display: block; position: absolute; top:0; left:0;"; //please replace this with four .css() calls ;) and double check the positioning
   parentElement = $(element.parentNode);
   newElement = $("<img/>", {
      src: to_src,
      style: "display: none; position: absolute; top:0; left:0;"
   }
   newElement.appendTo(parentElement);
   //please check in your dom if both images are in the carrousels-list-node, as I might have errored ;)
   newElement.fadeIn(5000, (function(el) {  return function() { el.remove(); }; })(element));
};

    InformationsquelleAutor Herbert

Schreibe einen Kommentar