幻灯片内容动画

Question

这是我的内容，不同的内容有不同的行为，例如当第一列点击第2列，第3列，第4列向右移动，如果第4列点击它，则推送所有内容左侧。

Jquery的

$("#toogle-1").click(function () {
    $(".WSUA__column__two").animate({ left: '50%' });
    $(".WSUA__column__three").animate({ right: '-25%' });
    $(".WSUA__column__four").animate({ right: '-50%' });
    $("span.hidden-menu.toogle-1").show();
    $("div.hidden-cross.toogle-1").show();
    $("#toogle-1").hide();
    $("#toogle-2").addClass("unclickable");
    $("#toogle-3").addClass("unclickable");
    $("#toogle-4").addClass("unclickable");
});
$("div.hidden-cross.toogle-1").click(function () {
    $(".WSUA__column__two").animate({ left: '25%' });
    $(".WSUA__column__three").animate({ right: '0%' });
    $(".WSUA__column__four").animate({ right: '-25%' });
    $(".hidden-menu").hide();
    $("div.hidden-cross.toogle-1").hide();
    $("#toogle-1").show();
    $("#toogle-2").removeClass("unclickable");
    $("#toogle-3").removeClass("unclickable");
    $("#toogle-4").removeClass("unclickable");
});

有没有办法创建一个没有声明toogle-1，toogle-2，toogle-3和toogle-4的函数？让我们说我想创建这样的另一个内容，我必须复制所有的jquery并更改所有的toogle。

Answer 1

这是你的意思吗？

		jQuery(document).ready(function() {
			jQuery('.container > div:nth-child(odd)').click(function() {
				jQuery(this).nextAll().toggleClass('siblings-move-odd');
				jQuery(this).toggleClass('active-odd');
			});
			jQuery('.container > div:nth-child(even)').click(function() {
				jQuery(this).prevAll().toggleClass('siblings-move-even');
				jQuery(this).toggleClass('active-even');
			});
		});

			.container {
			}
			.container > div {
				display: inline-block;
				width: 25%;
				float: left;
				position: relative;
				transition: left 1s ease-in;
				left: 0;
			}
			.container > div.siblings-move-odd {
				left: 25%;
				transition: left 1s ease-in;
			}
			.container > div.siblings-move-even {
				left: -25%;
				transition: left 1s ease-in;
			}
			.container div .right {
				background: grey;
				height: 18px;
				width: 0%;
				display: inline-block;	
				position: absolute;
				transition: width 1s ease-in;
			}
			.container div:nth-child(odd) .right {
				left: 100%;
			}
			.container div:nth-child(even) .right {
				right: 100%;
			}
			.container > div.active-odd .right {
				width: 100%;
				transition: width 1s ease-in;
			}
			.container > div.active-even .right {
				width: 100%;
				transition: width 1s ease-in;
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
			<div style="background-color: red;">
				1
				<div class="right">
				</div>
			</div>
			<div style="background-color: blue;">
				2
				<div class="right">
				</div>
			</div>
			<div style="background-color: green;">
				3
				<div class="right">
				</div>
			</div>
			<div style="background-color: purple;">
				4
				<div class="right">
				</div>
			</div>
		</div>