JQuery Fade-Animation anhalten

[dime1989]

Hallo liebe Forumuser,


seit einigen Tagen kämpfe ich mit dem Implementieren eines JQuery-Fade-Scripts.

Das unten beigefügte Script fadet einige Bilder auf meiner Webseite. Beim Betreten der Seite wird eine gewisse Grafik eine Zeit lang dargestellt und dann in einem sanften Übergang durch ein anderes ausgetauscht.

Das Problem dabei ist folgendes: Wenn ein User eine andere Unterseite anklickt, und gerade der Zeitpunkt erreicht ist, an welchem das Script die Bilder austauscht (d.h. fadet), so wird erst nach dem vollständigen Abschluss des Fade-Vorgangs die Seite gewechselt. Weiterhin verwende ich Javascript zum Scrollen des Textes in einem DIV-Container. Auch beim Scrollvorgang macht sich deutlich, dass die Scrollgeschwindigkeit während des Fadens wesentlich langsamer ist; sobald der Fade abgeschlossen ist, scrollt der Inhalt plötzlich wieder viel schneller.

Gerne möchte ich daher während des Scrollens, die Fade-Animation anhalten (auch wenn das Script gerade fadet, d.h. zwei halbtransparente Bilder sichtbar sind), danach - mouseup - soll das Script an der Stelle weiterlaufen.
Beim Seitenwechsel soll es auch pausiert werden, damit nach dem Klick direkt (nicht erst nach Abschluss des Fadens) zur neuen Seite gewechselt wird.

Internetseite auf welcher sich das Script befindet: floristmeister.info

Script/Auszüge des Seitencodes:

Im Seitendokument:

<script type="text/javascript" src="javascript/fade-plugin.js"></script>
<script type="text/javascript">
    (function($) {
                    function init() {
                                        $("#content_bg").fadeTransition({pauseTime: 6000,
                                                                         transitionTime: 3000,
                                                                         ignore: "#introslide",
                                                                         delayStart: 0,
                                                                         manualNavigation: false,
                                                                         pauseOnMouseOver: false,
                                                                         createNavButtons: true});
                                    }
                    $(document).ready(init);
                  })
    (jQuery);
  </script>

fade-plugin.js:

(function ($) {
  $.fn.fadeTransition = function(options) {
                            
    function fader(obj) {
      var timer = null,
          current = 0;
          els = (options.ignore)?$("> *:not(" + options.ignore + ")", obj):$("> *", obj);
      
      function setup() {
        $(obj).css("position", "relative");
        els.css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");
        
        if (options.createNavButtons) {
          createNavButtons();
        }
      
        if (options.pauseOnMouseOver) {
          $(obj).mouseover(pause).mouseout(cue);
        }
      
        if (options.delayStart > 0) {
          setTimeout(showFirst, options.delayStart);
        }
        else {
          showFirst();
        }
      }
      
      setup();
      
  }).mouseup(cue);

    function createNavButtons() {
        var i, nav = $('<div class="fadenav"></div>');
        for (i=0; i<els.length; i++)
          $('<a href="#">'+(i+1)+'</a>').click(manualNav).appendTo(nav);
       nav.appendTo(obj);
      }
      
      function manualNav(e) {
        var item;
        e = e || window.event;
        $(e.target).blur();
        item = $('.fadenav a', obj).index(e.target);
        if (timer) {
          clearTimeout(timer);
        }
        transition(item);
        return false;
      }
      
      function pause() {
        if (timer)
          clearTimeout(timer);
      }
      
      function highlightNav() {
        if (options.createNavButtons) {
          $('.fadenav a', obj).removeClass('current');
          $('.fadenav a:nth-child(' + (1 + current) + ')', obj).addClass('current');
        }
      }
      
      function showFirst() {
        if (options.ignore) {
          $(options.ignore, obj).fadeOut(options.transitionTime);
          $(els[current]).fadeIn(options.transitionTime, cue);
        }
        else {
          $(els[current]).css("display", "block");
        }
        
        highlightNav();
        
      }

      function transition(next) {
        $(els[current]).fadeOut(options.transitionTime);
        $(els[next]).fadeIn(options.transitionTime);
        current = next;
        highlightNav();
        cue();
      }

      function cue() {
        if ($("> *", obj).length < 2) {
          return false;
        }
        
        if (timer) {
          clearTimeout(timer);
        }
        
        if (!options.manualNavigation) {
          timer = setTimeout(function() { transition((current + 1) % els.length | 0)} , options.pauseTime);
        }
      }


}
    return this.each(function() {
      new fader(this);
    });
  }


})(jQuery);

Ich bedanke mich für die Hilfe!


Lieber Gruß aus Baden-Württemberg

Maximilian