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

标签 javascript jquery html css

我对 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

最佳答案

我在这里稍微简化了 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

关于javascript - 单击时交换 Div/JavaScript 语法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28615879/

上一篇：javascript - 如何访问附加元素并将其删除？

下一篇：html - 将 CSS 文件设置为私有(private)？

相关文章：

javascript - 带 JavaScript 的单选按钮

javascript - 基于javascript中宽度大小的不同背景src？

html - 将鼠标悬停在另一个单元格上时更改一个单元格的背景颜色(仅限 css)

javascript - 如何解码包含html元素的javascript变量值

javascript - 为什么 iTunes API 访问可以通过 JQuery 进行，但不能通过 XMLHttpRequest 对象进行？

javascript - 我的服务没有更新 - Angularjs

javascript - 实现这种过滤的好方法是什么？

javascript - 将 Popup 添加到 Phaser 游戏

javascript - 获取具有数据属性的父元素不起作用

javascript - parseInt 返回 NaN

©2024 IT工具网  联系我们