在Click / JavaScript语法上交换Divs

时间：2015-02-19 20:05:47

标签： javascript jquery html css3

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

目标： 我有一个带有三个链接的主div，每个链接都应该用新的通讯员替换原来的div。用户应该能够关闭新内容并返回主内容。

问题1：＆＃34;显示：无;＆＃34;只有在动画之后才会生效。

问题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

2 个答案:

答案 0 :(得分：1)

我已更新your fiddle

你的小提琴里没有slideDown课。

我为每个定位ID添加了类，因此您可以使用

$('.slider').click(function() {
$('.close-content').click(function() {

而不是

$('#opens-content-a,#opens-content-b,#opens-content-c') {
$('#closes-content-a,#closes-content-b,#closes-content-c') {

<强> 实施例

＆＃13;
＆＃13; 
$(function() {
    $('.slider').click(function() {
        var getParent = 
            $('#'+($(this).attr('id')).replace('opens','closes'));
        
        $(".content-main")
        .removeClass("slideIn")
        .addClass("slideOut")
        .css("display","none");
        
        getParent
        .parent()
        .removeClass("slideOut")
        .addClass("slideIn")
        .css("display","block");
    });
    
    $(".close-content").click(function() {
        
       $(this)
        .parent()
        .addClass("slideOut")
        .removeClass("slideIn")
        .css("display","none");
        
        $(".content-main")
        .addClass("slideIn")
        .removeClass("slideOut")
        .css("display","block");

	});
    
});
＆＃13; 
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%);
	}	
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<section>
    <div class="container">

        <div class="content-main">
            <div id="column-left">
                <h1 class="slider" 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 class="slider" 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 class="slider" 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">
            <div class="close-content" 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">
            <div class="close-content" 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">
            <div class="close-content" 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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：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

相关问题
最新问题