0
要素をmyfunc()に渡すにはどうすればflex-container-columnの個々のフレックス項目を制御できますか？シンプルなイベントを聞いているのは簡単ですが、ウェイポイントを使用すると、少し難しくなります。ウェイポイントでこの要素を使用する
今、私は正常にdirectionのparamater（？、それが呼ばれるものIDKの）myfunc()になく、内側myfunc()、ターゲット要素が$(".test-class")としてハードコードされているため、すべてのフレックスアイテムがアニメーションを適用されているを渡すことができます。
$(".test-class").addClass("animated fadeInDown");
：から
：
$(this).addClass("animated fadeInDown");
すべての答えは、ウェイポイントを使用していないので、doesntのヘルプをグーグルで私は何をしたいのようなものです。私は念のためにここにコードを提供しています - ここ はcodepen
です。
myscripts.js
$(document).ready(function(){
$('.test-class').waypoint(function(direction) {
myfunc(direction);
},{offset:'25%'});
function myfunc(direction){
if(direction === "down"){
$(".test-class").addClass("animated fadeInDown");
setTimeout(function(){
$(".test-class").removeClass("animated fadeInDown"); }, 2000);
}
else{
//do nothing
}
}
});
HTML
<body>
<div>
<ul class="header flex-container">
<li class="nav flex-item">About</li>
<li class="nav flex-item">Links</li>
<li class="nav flex-item">Contact</li>
</ul>
</div>
<div class="content flex-container">
<div class="sidebar flex-item">Sidebar</div>
<div class="main flex-item">
<div class="flex-container-column">
<p class="flex-item test-class"> This is the content</p>
<p class="flex-item test-class"> This is the content</p>
<p class="flex-item test-class"> This is the content</p>
<p class="flex-item test-class"> This is the content</p>
<p class="flex-item test-class"> This is the content</p>
<p class="flex-item test-class"> This is the content</p>
<p class="flex-item test-class"> This is the content</p>
<p class="flex-item test-class"> This is the content</p>
</div>
</div>
<div class="sidebar flex-item">Sidebar</div>
</div>
</body>
<footer>footer here</footer>
CSS
body{
margin: 0px;
font-family: sans-serif;
font-size: 2em;
}
.flex-container{
/* flexbox properties*/
display: -webkit-flex;
-webkit-flex-direction: row;
}
.flex-container-column{
display: -webkit-flex;
-webkit-flex-direction: column;
}
.flex-item{
/*flexbox properties*/
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.header{
height: 50px;
background-color: tomato;
margin: 0;
border-bottom: 3px solid rgba(0,0,0,0.3);
}
ul{
justify-content: flex-end;
}
.nav{
flex-direction: row;
margin: 2px;
padding: 0 10px 0 10px;
background-color: rgba(0,0,0,0.2);
color: white;
}
.content{
height: auto;
margin: 0px;
}
.sidebar{
background-color: grey;
flex: 1;
}
.main{
background-color: lightgrey;
flex: 2;
min-height: 1000px;
}
footer{
height: 50px;
border-top: 3px solid rgba(0,0,0,0.3);
background-color: tomato;
}