Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
[JS jQuery] - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [JS jQuery] (/thread-js-jquery)

[JS jQuery] - qwertyman - 01-09-2010

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


RE: [JS jQuery] - Kartofelek - 01-09-2010

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

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