幻灯片内容动画

这是我的内容和不同的内容具有不同的行为，比如当第一列点击第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。

来源

2017-07-07 Tommy Saputra

这是你的意思吗？

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

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

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

来源

2017-07-08 13:41:29 AlbertSamuel

幻灯片内容动画

回答

相关问题