Javascript 图像转换仅在2&；处捕捉；4.

我的图像转换有一些问题，只有在点击1和3按钮时，它才能正常工作，但当点击2和4按钮时，它们会卡住，你可以看到它被其他图像卡住。我需要它为所有图像平滑过渡，而不仅仅是2个图像，并在其他2个图像上卡住

我希望它看起来像这样：

我将css附加到它上，但您也可以到这里查看它的实际操作。当然，它有一些修改，使之适用于我的内容。但任何帮助都会很好。谢谢

---

有没有可能把代码缩减到一个简单的示例？请在@jsfiddle.net上发布一个演示

.cr-container {
width: 960px;
height: 600px;
position: relative;
margin: 0 auto;
text-align: center;
}

.cr-container label {
font-style: italic;
width: 240px;
height: 30px;
cursor: pointer;
color: #fff;
line-height: 32px;
font-size: 24px;
float: left;
position: relative;
margin-top: 35px;
z-index: 1000;
}

 .cr-container label:before {
content: '';
width: 34px;
height: 34px;
background: #1D3867;
position: absolute;
left: 50%;
margin-left: -17px;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(255,255,255,0.3);
z-index: -1;
  }


.cr-container label:after{
width: 1px;
height: 400px;
content: '';
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0)    100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffffff', endColorstr='#00ffffff',GradientType=0 );
position: absolute;
bottom: -20px;
right: 0px;
 }
 .cr-container label.cr-label-img-4:after{
width: 0px;
  }

 .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
 .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
 .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
 .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4 {
color: #1D3867;
  }

 .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
  .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
 .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
 .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before {
background: #fff;
box-shadow: 0 0 0 4px #1D3867;
 }

 .cr-container input {
display: none;
}

.cr-bgimg {
width: 960px;
height: 600px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}

.cr-bgimg {
background-repeat: no-repeat;
background-position: 0 0;
}

.cr-bgimg div {
width: 240px;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
 }

.cr-bgimg div span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -240px;
z-index: 2;
text-indent: -9000px;
 }

 .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
 .cr-bgimg div span:nth-child(1) {
background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-26.png);
 }

 .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
 .cr-bgimg div span:nth-child(2) {
background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-27.png);
 }

.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3) {
background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-28.png);
}

.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4) {
background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-29.png);
 }

 .cr-bgimg div:nth-child(1) span {
background-position: 0 0;
 }

 .cr-bgimg div:nth-child(2) span {
background-position: -240px 0;
 }

 .cr-bgimg div:nth-child(3) span {
background-position: -480px 0;
}

.cr-bgimg div:nth-child(4) span {
background-position: -720px 0;
}

  .cr-container input:checked ~ .cr-bgimg div span {
-webkit-animation: slideOut .6s ease-in-out;
-moz-animation: slideOut .6s ease-in-out;
-o-animation: slideOut .6s ease-in-out;
-ms-animation: slideOut .6s ease-in-out;
animation: slideOut .6s ease-in-out;
}

@-webkit-keyframes slideOut {
0% {
    left: 0;
}

100% {
    left: 150px;
}
 }

 @-moz-keyframes slideOut {
0% {
    left: 0;
}

100% {
    left: 150px;
}
}

  @-o-keyframes slideOut {
}

 100% {
left: 150px;
}   
}

@keyframes slideOut {
0% {
    left: 0;
}

100% {
    left: 150px;
}
}

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {
-webkit-transition: left .5s ease-in-out;
-moz-transition: left .5s ease-in-out;
-o-transition: left .5s ease-in-out;
-ms-transition: left .5s ease-in-out;
transition: left .5s ease-in-out;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
left: 0;
z-index: 10;
}

.cr-titles h3 {
color: #fff;
text-shadow: 1px 1px 6px #333;
 }

 .cr-titles h3 span {
z-index: 10000;
position: absolute;
width: 94.5%;
left: 0;
text-align: center;
opacity: 0;
top: 50%;
-webkit-transition: opacity .8s ease-in-out;
-moz-transition: opacity .8s ease-in-out;
-o-transition: opacity .8s ease-in-out;
-ms-transition: opacity .8s ease-in-out;
transition: opacity .8s ease-in-out;
}

.cr-titles h3 span:nth-child(1) {
font-family: texgyreadventor, Arial, sans-serif;
font-size: 60px;
display: block;
letter-spacing: 7px;
line-height: 40px;
}

.cr-titles h3 span:nth-child(2) {
margin-top: 69px;
background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-30.png),     url(/wp-content/uploads/2013/09/Education-Page-Element-31.png);
height: 53px;
font-size: 20px;
padding: 26px;
font-style: italic;
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
 }

 .cr-container input:checked ~ .cr-titles h3 span:nth-child(1) {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}

 .cr-container input.cr-selector-img-1:checked ~ .cr-titles div:nth-child(1) span:nth- child(1),
 .cr-container input.cr-selector-img-2:checked ~ .cr-titles div:nth-child(2) span:nth-child(1),
 .cr-container input.cr-selector-img-3:checked ~ .cr-titles div:nth-child(3) span:nth-child(1),
 .cr-container input.cr-selector-img-4:checked ~ .cr-titles div:nth-child(4) span:nth-child(1),
 .cr-container input.cr-selector-img-1:checked ~ .cr-titles div:nth-child(1) span:nth-child(2),
 .cr-container input.cr-selector-img-2:checked ~ .cr-titles div:nth-child(2) span:nth-child(2),
 .cr-container input.cr-selector-img-3:checked ~ .cr-titles div:nth-child(3) span:nth-child(2),
 .cr-container input.cr-selector-img-4:checked ~ .cr-titles div:nth-child(4) span:nth- child(2) {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
 }

 .collegesFrameDescription {
display: block;
width: 900px;
padding: 10px 30px;
color: #fff;
font-size: .85em;
position: absolute;
height: 125px;
z-index: 9;
bottom: 0;
opacity: 0;
text-align: left;
-moz-column-count: 3;
-webkit-column-count: 3;
-ms-column-count: 3;
column-count: 3;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-ms-column-gap: 20px;
column-gap: 20px;
}

.cr-container input.cr-selector-img-1:checked ~ .cr-titles div:nth-child(1)    .collegesFrameDescription,
.cr-container input.cr-selector-img-2:checked ~ .cr-titles div:nth-child(2) .collegesFrameDescription,
.cr-container input.cr-selector-img-3:checked ~ .cr-titles div:nth-child(3) .collegesFrameDescription,
.cr-container input.cr-selector-img-4:checked ~ .cr-titles div:nth-child(4) .collegesFrameDescription {
opacity: 1;
-webkit-transition: opacity .8s ease-in-out;
-moz-transition: opacity .8s ease-in-out;
-o-transition: opacity .8s ease-in-out;
-ms-transition: opacity .8s ease-in-out;
transition: opacity .8s ease-in-out;
}

}