Czy jest coś, co mogę zrobić, aby trochę go przyspieszyć? Czy są tam jakieś błędy rookie, które zauważysz?

Zauważam, że powtarzam wiele zmiennych. Tak więc nie muszę wypisać każdej linii, ale nie jestem pewien, czy jest lepsze rozwiązanie?

Problem występuje zwykle podczas włączania z powrotem do karty po nie jest na nim na nim. Zarejestruj się, klikając zewnętrzny pierścień kilka sekund, aby odpowiedzieć, ale w porządku. Prawie tak, jak lewy kod działa, musi być zastąpiony? Nie jestem pewien, ale chciałbym, jeśli doświadczony użytkownik był w stanie myć oczy nad moim kodem, aby zobaczyć, co można poprawić.

Oto pracujący JSFiddle http://jsfiddle.net/ea6x6/1/ i poniżej jest całości mojego kodu JavaScript.

jQuery(document).ready(function() {

var timeoutHandle;

// hide stuff
    var hideServices = function() {
            jQuery(".services-inner").css({"opacity": "0"});
            jQuery(".insignia-inner").css({"opacity": "0"});
            jQuery(".insignia-inner-text").css({"opacity": "0"});
    };

    var hideAll = function() {
            jQuery(".military-kit-inner").css({"opacity": "0"});
            jQuery(".property-inner").css({"opacity": "0"});
            jQuery(".home-contents-inner").css({"opacity": "0"});
            jQuery(".travel-inner").css({"opacity": "0"});
            jQuery(".events-inner").css({"opacity": "0"});
            jQuery(".adventurous-training-inner").css({"opacity": "0"});
            jQuery(".personal-injury-inner").css({"opacity": "0"});
            jQuery(".challenge-pursuits-inner").css({"opacity": "0"});
            jQuery(".sports-and-tours-inner").css({"opacity": "0"});
            jQuery(".winter-sports-inner").css({"opacity": "0"});

            jQuery(".now-available").css({"opacity": "0"});
            jQuery(".now-available-background").css({"opacity": "0"});
            jQuery(".launched-shortly").css({"opacity": "0"});
            jQuery(".launched-shortly-background").css({"opacity": "0"});
    };

    var showServicesDelay = function() {
            timeoutHandle = setTimeout(function () {
                    jQuery(".services-inner").css({"opacity": "0.5"});
                jQuery(".insignia-inner").css({"opacity": "1"});
                jQuery(".insignia-inner-text").css({"opacity": "1"});
                hideAll();
        }, 5000);       
    };

// show messages
    var showLaunchedShortly = function() {
            jQuery(".launched-shortly").css({"opacity": "1"});
            jQuery(".launched-shortly-background").css({"opacity": "1"});
    };

    var showNowAvailable = function() {
            jQuery(".now-available").css({"opacity": "1"});
            jQuery(".now-available-background").css({"opacity": "1"});
    };

// show services
    var showMilitaryKit = function() {
            jQuery(".military-kit-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showProperty = function() {
            jQuery(".property-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);    
    };

    var showHomeContents = function() {
            jQuery(".home-contents-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showTravel = function() {
            jQuery(".travel-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showEvents = function() {
            jQuery(".events-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showAdventurousTraining = function() {
            jQuery(".adventurous-training-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showPersonalInjury = function() {
            jQuery(".personal-injury-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showChallengePursuits = function() {
            jQuery(".challenge-pursuits-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showSportsAndTours = function() {
            jQuery(".sports-and-tours-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showWinterSports = function() {
            jQuery(".winter-sports-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };





// military kit
    jQuery(".military-kit-hover").click(function() {        
        hideAll();
        hideServices();
        showMilitaryKit();
        showServicesDelay();
        showNowAvailable();
    });

// property
    jQuery(".property-hover").click(function() {
        hideAll();
        hideServices();
        showProperty();
        showServicesDelay();
        showNowAvailable();
    }); 

// home contents
    jQuery(".home-contents-hover").click(function() {
        hideAll();
        hideServices();
        showHomeContents();
        showServicesDelay();
        showNowAvailable();
    }); 

// travel
    jQuery(".travel-hover").click(function() {
        hideAll();
        hideServices();
        showTravel();
        showServicesDelay();
        showNowAvailable();
    }); 

// events
    jQuery(".events-hover").click(function() {
        hideAll();
        hideServices();
        showEvents();
        showServicesDelay();
        showLaunchedShortly();
    }); 

// adventurous training
    jQuery(".adventurous-training-hover").click(function() {
        hideAll();
        hideServices();
        showAdventurousTraining();
        showServicesDelay();
        showLaunchedShortly();
    }); 

// personal injury
    jQuery(".personal-injury-hover").click(function() {
        hideAll();
        hideServices();
        showPersonalInjury();
        showServicesDelay();
        showNowAvailable();
    }); 

// challenge pursuits
    jQuery(".challenge-pursuits-hover").click(function() {
        hideAll();
        hideServices();
        showChallengePursuits();
        showServicesDelay();
        showNowAvailable();
    }); 

// sports and tours
    jQuery(".sports-and-tours-hover").click(function() {
        hideAll();
        hideServices();
        showSportsAndTours();
        showServicesDelay();
        showLaunchedShortly();
    }); 

// winter sports
    jQuery(".winter-sports-hover").click(function() {
        hideAll();
        hideServices();
        showWinterSports();
        showServicesDelay();
        showLaunchedShortly();
    }); 
});
1
pappy 26 listopad 2013, 18:55

3 odpowiedzi

Zgaduję, że graficzne jąkanie jest spowodowane, gdy "ukrywasz wszystko", a następnie "Pokaż jedno" w tym samym czasie (animacje są asynchroniczne na ogół). Nie sądzę, aby kod działa powoli, to konflikt graficzny. Dodaj parametr "z wyjątkiem optionej" do metody HideAll i metody HIDESServices i być może instrukcje przypadków. Do Ciebie, jak radzisz sobie z konfliktem.

0
AlexMA 26 listopad 2013, 15:03

Jest wiele rzeczy, które możesz zrobić, ale dobry początek byłby upewnić się, że używasz niestandardowej wersji jQuery w produkcji. Inny będzie połączyć niektóre z nich, na przykład:

jQuery(".services-inner").css({"opacity": "0"});
jQuery(".insignia-inner").css({"opacity": "0"});

Staje się

jQuery(".insignia-inner, .services-inner").css({"opacity": "0"});

Dokumenty jQuery: wybierak wielokrotny ("Selektor1, selektor2, selektorn") http://api.jquery.com/multiple-selector/

0
TheChristopher 26 listopad 2013, 15:04

Dla starterów można zaoszczędzić trochę czasu pobierania, zastępując jQuery ($), o ile nie jest sprzeczne z żadnymi innymi bibliotekami.

Ale także możesz przypisać wszystkie od razu, zastępując:

 var hideAll = function() {
            jQuery(".military-kit-inner").css({"opacity": "0"});
            jQuery(".property-inner").css({"opacity": "0"});
            jQuery(".home-contents-inner").css({"opacity": "0"});
            jQuery(".travel-inner").css({"opacity": "0"});
            jQuery(".events-inner").css({"opacity": "0"});
            jQuery(".adventurous-training-inner").css({"opacity": "0"});
            jQuery(".personal-injury-inner").css({"opacity": "0"});
            jQuery(".challenge-pursuits-inner").css({"opacity": "0"});
            jQuery(".sports-and-tours-inner").css({"opacity": "0"});
            jQuery(".winter-sports-inner").css({"opacity": "0"});

            jQuery(".now-available").css({"opacity": "0"});
            jQuery(".now-available-background").css({"opacity": "0"});
            jQuery(".launched-shortly").css({"opacity": "0"});
            jQuery(".launched-shortly-background").css({"opacity": "0"});
    };

Z czymś takim jak:

 var hideAll = function() {
           $('[class $="-inner"]').css({"opacity": "0"});
           $(':not[class $="-inner"]').css({"opacity": "0"});
           //or, replace the line above with
           $('[class ^="now-available"]').css({"opacity": "0"});
           $('[class ^="launched-shortly"]').css({"opacity": "0"});
    };

To tylko na przykład, ale logika może nie być dokładnie tym, czego szukasz (zasadniczo, wszystko, co ma klasę w tym przykładzie, ma krycie od 0).

0
Sablefoste 26 listopad 2013, 15:23