我目前正在构建一个由两个图像组成的小菜单。这些图片上的图片标题是使用this little CSS stylesheet.构建的。我正在使用图片在不同的<div>容器之间切换，并填充文字。
但是因为我已经集成了CSS字幕，所以jQuery＆＃34;切换＆＃34;声明不再继续工作。它似乎只在动画停止时才有效。因此，我无法在CSS动画期间切换<div>容器。
此外，Google Chrome上不会出现此问题（目前仅在Firefox上）。
这是一个缩短版本（尝试通过点击图像在两个div之间快速切换）：
$(document).ready(function() {
$(".first-content").hide();
$(".second-content").hide();
});
$("#first").click(function(){
$(".home-text").hide();
$(".second-content").hide();
$(".first-content").fadeIn(200);
});
$("#second").click(function(){
$(".home-text").hide();
$(".first-content").hide();
$(".second-content").fadeIn(200);
});@import "http://font-style: em;googleapis.com/css?family=Open+Sans)";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{background:rgba(44,62,80,0.92);color:#fff;font-size:14px;font-family:'Open Sans', sans-serif, 'trebuhet ms',HelveticaNeue, arial;height:100%;line-height:20px}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}p{line-height:2.0em}h1{font-size:3.0em;line-height:40px}a{text-decoration:none;color:rgba(74,92,110,0.92)}a:hover{color:#fff}img{max-width:100%}.pull-right{float:right}.pull-left{float:left}header{padding:30px 20px;background:rgba(64,82,100,0.92);color:#ffffff;margin-bottom:20px}.btn-download{background:rgba(24,42,60,0.92);color:rgba(124,142,160,0.92);padding:20px 50px;display:inline-block;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;border-radius:5px}.btn-download:hover{background:rgba(94,112,130,0.92)}.wrapper{max-width:1000px;margin:0 auto}.wrapper:before,.wrapper:after{content:'';display:table;clear:both}footer{margin-top:30px;background:rgba(24,42,60,0.92);color:rgba(124,142,160,0.92);padding:20px 0;text-align:left;font-size:0.9em}@keyframes anima{from{margin-top:-50px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}to{margin:auto;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1}}@-webkit-keyframes anima{from{margin-left:-20px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}to{margin-left:10px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1}}@media screen and (max-width: 560px){.wrapper{padding:20px}}.pic{max-width:300px;max-height:200px;position:relative;overflow:hidden;margin:10px;display:inline-block;-webkit-animation:anima 2s;-moz-animation:anima 2s;-o-animation:anima 2s;-ms-animation:anima 2s;animation:anima 2s;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.pic-3d{-webkit-perspective:500;-moz-perspective:500;-o-perspective:500;-ms-perspective:500;perspective:500;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.pic-caption{cursor:default;position:absolute;width:100%;height:100%;background:rgba(44,62,80,0.92);padding:10px;text-align:center;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}.pic-image{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.pic:hover .pic-image{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.pic-title{font-size:1.8em}a,a:hover,.pic .pic-image,.pic-caption,.pic:hover .pic-caption,.pic:hover img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease}.pic:hover .bottom-to-top,.pic:hover .top-to-bottom,.pic:hover .left-to-right,.pic:hover .right-to-left,.pic:hover .rotate-in,.pic:hover .rotate-out,.pic:hover .open-up,.pic:hover .open-down,.pic:hover .open-left,.pic:hover .open-right,.pic:hover .come-left,.pic:hover .come-right{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-moz-touch-callout:none;-o-touch-callout:none;-ms-touch-callout:none;touch-callout:none;-webkit-tap-highlight-color:transparent;-moz-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;-ms-tap-highlight-color:transparent;tap-highlight-color:transparent}.bottom-to-top{top:50%;left:0}.pic:hover .bottom-to-top{top:0;left:0}.top-to-bottom{bottom:50%;left:0}.pic:hover .top-to-bottom{left:0;bottom:0}.left-to-right{top:0;right:50%}.pic:hover .left-to-right{right:0;top:0}.right-to-left{top:0;left:50%}.pic:hover .right-to-left{left:0;top:0}.rotate-in{-webkit-transform:rotate(90deg) scale(0.1);-moz-transform:rotate(90deg) scale(0.1);-o-transform:rotate(90deg) scale(0.1);-ms-transform:rotate(90deg) scale(0.1);transform:rotate(90deg) scale(0.1);top:0;left:0}.pic:hover .rotate-in{-webkit-transform:rotate(360deg) scale(1);-moz-transform:rotate(360deg) scale(1);-o-transform:rotate(360deg) scale(1);-ms-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}.rotate-out{-webkit-transform:rotate(90deg) scale(3);-moz-transform:rotate(90deg) scale(3);-o-transform:rotate(90deg) scale(3);-ms-transform:rotate(90deg) scale(3);transform:rotate(90deg) scale(3);top:0;left:0}.pic:hover .rotate-out{-webkit-transform:rotate(360deg) scale(1);-moz-transform:rotate(360deg) scale(1);-o-transform:rotate(360deg) scale(1);-ms-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}.open-down{-webkit-transform:rotateX(-180deg);-moz-transform:rotateX(-180deg);-o-transform:rotateX(-180deg);-ms-transform:rotateX(-180deg);transform:rotateX(-180deg);top:0;left:0}.pic:hover .open-down{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-o-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}.open-up{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);-ms-transform:rotateX(180deg);transform:rotateX(180deg);top:0;left:0}.pic:hover .open-up{-webkit-transform:rotateX(0);-moz-transform:rotateX(0);-o-transform:rotateX(0);-ms-transform:rotateX(0);transform:rotateX(0)}.open-left{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg);left:0;top:0}.pic:hover .open-left{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg)}.open-right{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);left:0;top:0}.pic:hover .open-right{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg)}.come-left{-webkit-transform:rotateY(90deg) rotateX(90deg);-moz-transform:rotateY(90deg) rotateX(90deg);-o-transform:rotateY(90deg) rotateX(90deg);-ms-transform:rotateY(90deg) rotateX(90deg);transform:rotateY(90deg) rotateX(90deg);left:0;top:0}.pic:hover .come-left{-webkit-transform:rotateY(0) rotateX(0);-moz-transform:rotateY(0) rotateX(0);-o-transform:rotateY(0) rotateX(0);-ms-transform:rotateY(0) rotateX(0);transform:rotateY(0) rotateX(0)}.come-right{-webkit-transform:rotateY(-90deg) rotateX(-90deg);-moz-transform:rotateY(-90deg) rotateX(-90deg);-o-transform:rotateY(-90deg) rotateX(-90deg);-ms-transform:rotateY(-90deg) rotateX(-90deg);transform:rotateY(-90deg) rotateX(-90deg);left:0;top:0}.pic:hover .come-right{-webkit-transform:rotateY(0) rotateX(0);-moz-transform:rotateY(0) rotateX(0);-o-transform:rotateY(0) rotateX(0);-ms-transform:rotateY(0) rotateX(0);transform:rotateY(0) rotateX(0)}@media screen and (max-width: 560px){.pic{max-width:400px;max-height:300px;display:block;-webkit-animation:none;-moz-animation:none;-o-animation:none;-ms-animation:none;animation:none;margin:10px auto}}<!DOCTYPE html>
<html lang="en">
<head>
<title>InContent - A content image hover effects.</title>
<meta charset="utf-8" />
<!-- Main CSS -->
<link rel="stylesheet" href="css/sass-compiled.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<section>
<!--Effect: Bottom to Top -->
<div class="pic" id="first">
<img src="http://lorempixel.com/output/city-q-c-200-200-2.jpg" class="pic-image" alt="Pic"/>
<span class="pic-caption bottom-to-top">
<h1 class="pic-title">FIRST</h1>
<p>LINK TO THE FIRST DIV</p>
</span>
</div>
<!--Effect: Top to Bottom -->
<div class="pic" id="second">
<img src="http://lorempixel.com/output/business-q-c-200-200-3.jpg" class="pic-image" alt="Pic"/>
<span class="pic-caption top-to-bottom">
<h1 class="pic-title">SECOND</h1>
<p>LINK TO THE SECOND DIV</p>
</span>
</div>
<div class="home-text">
<h1>HOME</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="first-content">
<h1>FIRST</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="second-content">
<h1>SECOND</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</section>
<!-- End of effects -->
<!-- TOUCH FRIENDLY IN MOBILE DEVICES -->
<script>
</script>
</body>
</html>