jQuery FadeIn和FadeOut-交换div [英] jQuery fadeIn and fadeOut - swapping divs

问题描述

一般来说，我对jQuery和javascript还是陌生的，但由于有这样的网站，我才得以完成自己的工作.

I'm new to jQuery and javascript in general but am plugging my way through thanks to sites like these.

我有一个页面，其中包含六个隐藏的div，这些div通过带有单独ID的相应链接进行调用.当每个div变为可见(.fadeIn)时，当前显示的div被隐藏(.fadeOut).

I have a page with six hidden divs that are called with corresponding links with individual ids. When each div is made visable (.fadeIn), the currently displayed div is hidden (.fadeOut).

一切正常，但是我的代码似乎很长而且很笨拙. 请问有没有更简单，更短，更省代码的方式来执行同一任务?

It all works fine but my code seems to be really long and ungainly. Is there an easier, shorter, less code-intensive way to perform the same task please?

这是我的js:

非常感谢. 迈克

$(document).ready(function(){

$("#link1").click(function() {
$("#panel2").fadeOut("slow", function() {                       
$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel1").fadeIn("slow")});
});
});
});
});
});

$("#link2").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel2").fadeIn("slow")});
});
});
});
});
});

$("#link3").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel3").fadeIn("slow")});
});
});
});
});
});

$("#link4").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {                       
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel4").fadeIn("slow")});
});
});
});
});
});

$("#link5").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {                       
$("#panel4").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel5").fadeIn("slow")});
});
});
});
});
});

$("#link6").click(function() {
    $("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {                       
$("#panel4").fadeOut("slow", function() {
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeIn("slow")});
});
});
});
});
});

});

推荐答案

可以肯定地使此代码更高效，更灵活，但是对于上面的一个简单的6元素示例来说，它就足够了.多数情况下，这只是作为概念证明.

This code could certainly be made more efficient and flexible, but for a simple 6 element example as the above it should be enough. This was mostly done as just a proof of concept.

我选择以编程方式添加这些类，但是理想情况下，您应该在HTML中添加这些类.如果是我，我可能还会用expandos代替id字符串替换.

I chose to add the classes programmatically, but ideally you should have the classes added in the HTML. If it were me I would probably also have used expandos instead of id string replacement.

编辑，已添加修复程序:
顺序动画的递归功能可确保在正确的时间处理fadeIn.可能有一种更有效的方法，例如使用计数器，但是对于6个元素来说应该没问题，而且这可以更忠实地匹配您的原始代码.
修复了在不正确的时间处理动画的问题，例如，当您同时单击多个链接时，会通过停止和结束动画来导致多个面板尝试淡入.

EDIT, fixes added:
Recursive function for sequential animation makes sure that fadeIn is processed at the right time. There may be a more efficient method for this, such as using a counter, but for just 6 elements it should be fine, and this matches your original code more faithfully.
Fix for animations processing at incorrect times, such as when you click many links simultaneously, causing multiple panels to try to fadeIn, by stopping and finishing animations.

jQuery(function($){
    //add links/panels class to all elements whose id begins with link/panel
    $("[id^=link]").addClass("links");
    $("[id^=panel]").addClass("panels");

    $(".links").click(function(e){
        //find all panels, make a normal array, and stop/finish all animations
        var panels=$.makeArray($(".panels").stop(true, true));

        //find panel to show
        var panelShow=$("#"+this.id.replace("link","panel"));

        //recursive function to execute fades in sequence
        function queueFX(queue){
            if(queue.length==0){
                panelShow.fadeIn("slow");
                return;
            }
            $(queue.shift()).fadeOut("slow", function(){
                queueFX(queue);
            });
        }
        queueFX(panels);

        //stop event propogation and default behavior, commented out because you don't seem to want this behavior
        e.preventDefault();
        //e.stopPropagation();
        //return false;
    });
});

这篇关于jQuery FadeIn和FadeOut-交换div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！