Question

我有几个div在点击时显示不同的图像，然后在5秒后淡出。只有我希望每次单击div时都会重置此数字。下面是我尝试使用的代码，但它不起作用。它在第一次点击五秒后淡出。我无法在每次新点击时重置它。

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

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

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

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

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

我做错了什么？

编辑：这是我的问题的工作jsFiddle。 http://jsfiddle.net/Cb4wB/1/目前没有任何服务图片消失。

我需要这样做，以便它们在五秒后消失，除非点击了不同的服务，在这种情况下该服务将显示五秒钟，除非点击另一个，依此类推。

Answer 1

为了使代码按预期工作，需要定义变量timeoutHandle。因此，您可以在代码中添加一行var timeoutHandle;，如下所示，

http://jsfiddle.net/eA6x6/1/

<强> JS

jQuery(document).ready(function() {
var timeoutHandle;
// timer
    var servicesTimer = 5000;   

// 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"});
    };

    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 stuff
    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();
    });

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

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

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

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

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

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

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

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

// winter sports
    jQuery(".winter-sports-hover").click(function() {
        hideAll();
        hideServices();
        showWinterSports();
        showServicesDelay();
    }); 
});

Answer 2

除了我在这里看到的全局命名空间污染（太多混乱），我建议使用jQuery的Deferred Objects或者jQuery的Callbacks。在操作方面，您可以通过保持任务分离来重新定义代码。基本上，只有在另一个动作完成任务时才会发生动作。

Documentation on Deferred Objects

我正在做这些jQuery正确重置吗？

2 个答案: