javascript - 单击时交换 Div/JavaScript 语法

Question

我对 JavaScript 一无所知...我接近我需要实现的目标，但我认为很少有错误是由我的 JavaScript 语法质量差引起的。

目标:我有一个包含三个链接的主 div，每个链接都应该用一个新的相应链接替换 ​​onclick 原始 div。用户应该能够关闭新内容并返回到主要内容。

问题 1:“显示:无；”应仅在动画后生效。

问题 2: 当您返回到原始主要内容 div 时，如果您再次单击同一个链接，它会再次显示对应的 div。动画也无法生效。

    $(function() {
    $("#opens-content-a").click(function() {
        $(".content-main").toggleClass("slideOut");
        $(".content-main").css("display","none");
        $(".content-a").css("display","block");
        $(".content-a").toggleClass("slideIn");
    });
});

$(function() {
    $("#closes-content-a").click(function() {
        $(".content-a").toggleClass("slideOut");
        $(".content-a").css("display","none");
        $(".content-main").css("display","block");
        $(".content-main").toggleClass("slideIn");
    });
});

$(function() {
    $("#opens-content-b").click(function() {
        $(".content-main").toggleClass("slideOut");
        $(".content-main").css("display","none");
        $(".content-b").css("display","block");
        $(".content-b").toggleClass("slideIn");
    });
});

$(function() {
    $("#closes-content-b").click(function() {
        $(".content-b").toggleClass("slideOut");
        $(".content-b").css("display","none");
        $(".content-main").css("display","block");
        $(".content-main").toggleClass("slideIn");
    });
});

$(function() {
    $("#opens-content-c").click(function() {
        $(".content-main").toggleClass("slideOut");
        $(".content-main").css("display","none");
        $(".content-c").css("display","block");
        $(".content-c").toggleClass("slideIn");
    });
});

$(function() {
    $("#closes-content-c").click(function() {
        $(".content-c").toggleClass("slideOut");
        $(".content-c").css("display","none");
        $(".content-main").css("display","block");
        $(".content-main").toggleClass("slideIn");
    });
});

HTML

<section> 
<div class="container"> 

    <div  class="content-main">
    <div id="column-left">
    <h1 id="opens-content-a">OPEN A</h1>Some Content</div>
    <div id="column-center">
    <h1 id="opens-content-b">OPEN B</h1>Some Content</div>
    <div id="column-right">
    <h1 id="opens-content-c">OPEN C</h1>Some Content</div>
    </div>

    <div  class="content-a">
    <div id="closes-content-a">X</div>
    Some Content
    </div>

    <div  class="content-b">
    <div id="closes-content-b">X</div>
    Some Content
    </div>

    <div  class="content-c">
    <div id="closes-content-c">X</div>
    Some Content
    </div>

    </div>

CSS

body {
    background-color: #24354c;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: "arial", sans-serif;
}

p {
    text-align: left;
    padding: 20px 20px;
}

h1 { 
    color: #FF0000; 
    text-align: left;
    padding: 0px 20px;
}

section {
    display: table; 
    position: relative; 
    min-height: 100%;
    width: 100%;   
    background: #24354c; 
}

.container {
    display: table-cell;
    vertical-align: middle;
}

.content-main { 
    display: inline-block;
    margin: 0 auto;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}
#column-left { float: left; width: 30%; }
#column-right { float: right; width: 30%; }
#column-center { display: inline-block; width: 30%; }

.content-a {
    display: none;
    margin: 0 auto;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}

.content-b {
    display: none;
    margin: 0 auto;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}

.content-c {
    display: none;
    margin: 0 auto;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}

#opens-content-a { cursor: pointer;}

#closes-content-a {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}    

#opens-content-b { cursor: pointer;}

#closes-content-b {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}   

#opens-content-c { cursor: pointer;}

#closes-content-c {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}   

/*-------------------------- SLIDE OUT ---------------------------*/
.slideOut { 
    animation-name: slideOut;
    -webkit-animation-name: slideOut;
    -webkit-animation-duration: 1s; 
    animation-duration: 1s;  
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both;
} 

@-webkit-keyframes slideOut { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(20px); 
    } 
} 
@keyframes slideOut { 
    0% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
}

/*-------------------------- SLIDE IN ---------------------------*/

.slideIn {
    visibility: visible;
    animation-name: slideIn;
    -webkit-animation-name: slideIn;    

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;                    
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }       
}

@-webkit-keyframes slideIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }   
}

这是我目前所拥有的JSFiddle

Answer 1

我在这里稍微简化了 js，但您要做的是利用 animationend 事件在 css 动画完成后运行一些代码。您可能还想在元素完成后从元素中删除动画类。

JS:

$(function() {
var main = $('.content-main');
var contentA = $(".content-a");
var contentB = $(".content-b");
var contentC = $(".content-c");

var openContent = function(content) {
    // run animation on main div
    main.addClass('slideOut');
    // do stuff after animation has ended
    main.one('webkitAnimationEnd oAnimationEnd animationend', function(e){
        // Hide div
        main.css("display","none");
        // remove animation class
        main.removeClass("slideOut");
    });
    // show content div
    content.css("display","block");
    // run animation on content div
    content.addClass("slideIn");
    // do stuff after animation has ended
    content.one('webkitAnimationEnd oAnimationEnd animationend', function(e){
        // remove animation class
        content.removeClass("slideIn");
    });
}

var closeContent = function(content) {
    // run animation on content
    content.addClass("slideOut");
    // do stuff after animation ends
    content.one('webkitAnimationEnd oAnimationEnd animationend', function(e){
        // hide content
        content.css("display","none");
        // remove animation class
        content.removeClass('slideOut');
    });
    // show main div
    main.css("display","block");
    // run animation on main div
    main.addClass("slideIn");
    // do stuff after animation ends
    main.one('webkitAnimationEnd oAnimationEnd animationend', function(e){
        // remove animation class
        main.removeClass("slideIn");
    });
}

$("#opens-content-a").click(function(){
    openContent(contentA);
});
$("#closes-content-a").click(function(){
    closeContent(contentA);
});

$("#opens-content-b").click(function(){
    openContent(contentB);
});
$("#closes-content-b").click(function(){
    closeContent(contentB);
});

$("#opens-content-c").click(function(){
    openContent(contentC);
});
$("#closes-content-c").click(function(){
    closeContent(contentC);
});
});

HTML:

<section>    
<div class="container"> 

<div  class="content-main">
<div id="column-left">

<h1 id="opens-content-a">OPEN A</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl </p></div>
<div id="column-center">
<h1 id="opens-content-b">OPEN B</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl </p></div>
<div id="column-right">
<h1 id="opens-content-c">OPEN C</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl </p></div>

</div>

<div  class="content-a content">
<div id="closes-content-a">X</div>
<h1>CONTENT A</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>

<div  class="content-b content">
<div id="closes-content-b">X</div>
<h1>CONTENT B</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>

<div  class="content-c content">
<div id="closes-content-c">X</div>
<h1>CONTENT C</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>

</div>
</section>

CSS:

body {
    background-color: #24354c;
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: "arial", sans-serif;
}

p {
    text-align: left;
    padding: 20px 20px;
}

h1 { 
    color: #FF0000; 
    text-align: left;
    padding: 0px 20px;
}

section {
    display: table; 
    position: relative; 
    min-height: 100%;
    width: 100%;   
    background: #24354c; 
}

.container {
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

.content-main {
    position: absolute;
    overflow:auto;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
    width: 80%;
    left: 10%;
}
#column-left { float: left; width: 30%; }
#column-right { float: right; width: 30%; }
#column-center { display: inline-block; width: 30%; }

.content {
    position: absolute;
    display: none;
    left: 10%;
    overflow:auto;
    width: 80%;
    max-width: 1100px; 
    color: #fff;
    background: #17202f;
}

#opens-content-a { cursor: pointer;}

#closes-content-a {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}    

#opens-content-b { cursor: pointer;}

#closes-content-b {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}   

#opens-content-c { cursor: pointer;}

#closes-content-c {
    float: right;
    padding: 20px 20px;
    color: #FF0000;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}   

/*-------------------------- SLIDE OUT ---------------------------*/
.slideOut { 
    animation-name: slideOut;
    -webkit-animation-name: slideOut;
    -webkit-animation-duration: 1s; 
    animation-duration: 1s;  
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both;
} 

@-webkit-keyframes slideOut { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(20px); 
    } 
} 
@keyframes slideOut { 
    0% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
}

/*-------------------------- SLIDE IN ---------------------------*/

.slideIn {
    visibility: visible;
    animation-name: slideIn;
    -webkit-animation-name: slideIn;    

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;                    
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }       
}

@-webkit-keyframes slideIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }   
}

抱歉，我的 js 与您所拥有的相比有很大的修改，但我想使我的更改更加清晰。您可能希望像 Syahrul 这样简化它，而不是为每个元素使用自定义 css 类。建议。

这是我的 jsFiddle