[JS jQuery]

[qwertyman]

Problem wygląda następująco. Mam kod (poniżej) który dodaje automatycznie efekt hover z efektem fade do wszystkich obrazków które posiadają swój odpowiednik z nazwą *-hover.*. Wszystko fajnie i działa tylko chodzi mi o przerobienie samego efektu fade. Chodzi o to, że nie przechodzą one płynnie jeden w drugi tylko dzieje się tak że najpierw pierwszy zanika a dopiero później drugi się pojawia co przy białym tle powoduje efekt "błysku, flasha, mignięcia ..." który bardzo nie fajnie wygląda przy większej ilości tego na stronie. Zależało by mi na przeróbce teko kodu w taki sposób, żeby tylko drugi obrazek miał fade i pojawiał się na pierwszym co zniweluje efekt przebijania tła.


Kod:

Kod:

(function($){
        $.fn.extend({
                imghover: function(opt){
                        return this.each(function() {
        opt = $.extend({
            prefix: '',
            suffix: '-hover',
            src: '',
            btnOnly: true,
            fade: true,
            fadeSpeed: 400,
            preload: true
          }, opt || {});

        var node = $(this);
        if(!node.is('img')&&!node.is(':image')){
          var sel = 'img,:image';
          if (opt.btnOnly) sel = 'a '+sel;
          node.find(sel).imghover(opt);
          return;
        }

        var orgImg = node.attr('src');

        var hoverImg;
        if(opt.src){
          hoverImg = opt.src;
        }else{
          hoverImg = orgImg;
          if(opt.prefix){
            var pos = hoverImg.lastIndexOf('/');
            if(pos>0){
              hoverImg = hoverImg.substr(0,pos-1)+opt.prefix+hoverImg.substr(pos-1);
            }else{
              hoverImg = opt.prefix+hoverImg;
            }
          }
          if(opt.suffix){
            var pos = hoverImg.lastIndexOf('.');
            if(pos>0){
              hoverImg = hoverImg.substr(0,pos)+opt.suffix+hoverImg.substr(pos);
            }else{
              hoverImg = hoverImg+opt.suffix;
            }
          }
        }

        if(opt.fade){
          var offset = node.offset();
          var hover = node.clone(true); hover.attr('src', hoverImg);
          node.wrap('<div />'); var hdiv = $(node).parent();
          hdiv.css({ position: 'relative', zIndex: 1000 });
          hover.css({ zIndex: 999, position:'absolute', left:'0',top:'0' }).hide().insertAfter(node);

          hdiv.hover(function()
          {   var offset=node.offset();
              hover.css({left: '0', top: '0'});
              hover.stop(true,true).fadeIn(opt.fadeSpeed);
              node.stop(true,true).fadeOut(opt.fadeSpeed,function(){node.show();});
          },function()
          {   node.stop(true,true).fadeIn(opt.fadeSpeed);
              hover.stop(true,true).fadeOut(opt.fadeSpeed);
          });

        }else{
          if(opt.preload) jQuery("<img>").attr("src", hoverImg);
          node.hover(
            function(){node.attr('src', hoverImg)},
            function(){node.attr('src', orgImg)}
          );
        }

        

                        });
                }
        });
})(jQuery);

[Kartofelek]

Polecam zobaczyc to. I latwiejsze i od razu z wytłumaczeniem

http://jqueryfordesigners.com/image-fade-revisited/