[JavaScript] Problem mit Slide-Effekt

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Atkaz, 15. November 2011 .

Schlagworte:
  1. 15. November 2011
    Problem mit Slide-Effekt

    Hallo Leute,

    ich habe mir einen Slider mittels Jquery erstellt, funktioniert auch wunderbar. Doch leider nicht perfekt. Das Problem besteht darin, dass wenn z.b. im Firefox von meiner Homepage in ein anderes Tab/andere HP wechsle und da ne weile bleibe und dann wieder in meine Homepage schalte, der Slider versucht, die Animation bzw. das Switchen der einezlnen Contaienr, die ich dadurch, dass ich in dem anderen Tab gearbeitet habe und somit quasi "verpasst" habe, nachzuholen.Genauer gesagt werden die Container bis zum aktuellen Stand schnell animiert.

    Ich hoffe ihr versteht wie ich das meine. Das Problem besteht auch in Chrome.

    hier ist der Code
    Code:
    
    (function($){
     
     $.fn.slider = function(option)
     {
     
     $this = $(this);
     // Var
     option = {
     auto:true,
     speed:5000
     }
     
     opt = $.extend($.fn.slider.option,option);
     
     // objects
     obj = {
     
     slider_body: $this.find(".slider_body"),
     infobox: $this.find(".slider_infoBox"),
     infobox_elemnts : $this.find(".slider_infoBox").find("h3,span,a"),
     navi_elements: $this.find("#slide_navigation ").find("li")
     } 
     
     
     // Css 
     obj.infobox.css("opacity",0.6)
     obj.slider_body.hide();
     
     
     
     /* ----------------------------------------------------------------------------------------
     * loop
     *
     * leitet eine Schleife ein.
     */
     function loop()
     {
     
     if(!opt.auto){ return;} // wenn auto deaktiviert ist, dann keine automatische Animation
     
     // wenn nicht
     blend()
     setTimeout(loop, opt.speed );
    
     } // loop Ende
     
     /* ----------------------------------------------------------------------------------------
     * blend
     * führt die Slideeffekte durch
     */
     function blend()
     {
     
     var current = obj.slider_body.filter(".current");
     current.find(".slider_infoBox").slideUp("slow"); // infobox Slideup
     obj.navi_elements.filter(".current").removeClass("current");
     current.fadeOut("slow")
     .removeClass("current");
     
     current = (current.next(".slider_body").length) ?
     current.next() : obj.slider_body.first();
     obj.navi_elements.filter('[rel="'+ current.attr("id")+'"]').addClass("current")
     current.fadeIn("slow").addClass("current");
     
     current.find(".slider_infoBox").delay(1000).slideDown("slow")
     
     }
     // Starten der Animation
     
     /* ----------------------------------------------------------------------------------------
     * name: 
     * type: click
     * Navigation der Slider
     */
     
     obj.navi_elements.not(".current").click(function()
     {
     obj.navi_elements.removeClass("current");
     
     opt.auto=false; // Animation stoppen
     
     var current= obj.slider_body.filter(".current")
     current.find(".slider_infoBox").slideUp("slow"); // infobox Slideup
     current.fadeOut("slow")
     .removeClass("current");
     
     current = obj.slider_body.filter('[id="'+$(this).attr("rel")+'"]')
     .fadeIn("slow").addClass("current")
     .find(".slider_infoBox").slideDown("slow"); // verstecken der infoBox
     
     $(this).addClass("current")
     
     
     })
     
     
     
     obj.slider_body.first().fadeIn("slow",function(){
     obj.navi_elements.filter('[rel="'+$(this).attr("id")+'"]').addClass("current");
     $(this).find(".slider_infoBox").slideDown("slow")
     setTimeout(loop, opt.speed );
     }).addClass("current");
     } // fn.slider ENDE
     
     
    
    })(jQuery)
    
    
    
     
  2. 15. November 2011
    AW: Problem mit Slide-Effekt

    hinweis: die variablen `opt` und `obj` leaken in den globalen kontext.
    dadurch werden mehrere slider auf einmal unmöglich.

    ich hab eben versucht dein script zu modifizieren, aber jquery hat so eine beschissene api, dass mir direkt die lust vergangen ist.

    das verhalten ist aber nicht nachvollziehbar. normalerweise laufen scripts weiter wenn man den tab verlässt.
     
  3. 16. November 2011
    AW: Problem mit Slide-Effekt

    hmm..es ist für mich auch unverständlich, wieso sich das script so verhält..?(


    was wolltest du denn genau modifizieren?


    mfg
    atkaz
     
  4. 16. November 2011
    AW: Problem mit Slide-Effekt

    nein hab das ganze nur auf dem lokalen Server. Hab das Problem aber gelöst. Es handelte sich dabei anscheinend um ein jQuery-Bug :

     
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.