■ 트렌지션
<style>
.a{
width: 100px;
height: 100px;
border: 1px solid #000;
transition: all 2s;
}
</style>
<body>
<div class="a" id="a1"></div>
<div class="a" id="a2"></div>
<div class="a" id="a3"></div>
</body>
○ 클래스 전체 잡기
<script>
$(".a").mouseover(function(){
$(".a").css({"width":"200px"});
}).mouseout(
function(){
$(".a").css({"width":"100px"});
}
);
</script>
○ 각각에 들어가도록 for문 만들기 넣어주기
<script>
for(let i = 1; i<=$(".a").length;i++){
$("#a"+i).mouseover(function(){
$("#a"+i).css({"transition":"all 2s","width":"200px"});
}).mouseout(function(){
$("#a"+i).css({"width":"100px","transition":"all 0s"});
});
}
</script>
○ 함수로 만들어서 적용하기
<script>
function a(a,b){
for(let i = 1; i<=$(a).length;i++){
$(b+i).mouseover(function(){
$(b+i).css({"transition":"all 2s","width":"200px"});
}).mouseout(function(){
$(b+i).css({"width":"100px","transition":"all 0s"});
});
}
}
a(".a","#a");
</script>
○ eq()로 인덱스 잡아주기
<script>
for(let i = 0; i<$(".a").length;i++){
$(".a").eq(i).mouseover(function(){
$(".a").eq(i).css({"transition":"all 2s","width":"200px"});
});
$(".a").eq(i).mouseout(function(){
$(".a").eq(i).css({"width":"100px","transition":"all 0s"});
});
}
</script>
○ 나의 다음번째 있는 녀석 변경
<script>
for(let i = 0; i<$(".a").length;i++){
let z = (i+1) % $(".a").length;
$(".a").eq(i).mouseover(function(){
$(".a").eq(z).css({"transition":"all 2s","width":"200px"});
});
$(".a").eq(i).mouseout(function(){
$(".a").eq(z).css({"width":"100px","transition":"all 0s"});
});
}
</script>
○ 함수선언 및 반복시키기
<script>
let i = 0;
function ae(ix){
$(".a").eq(ix).css({"width":"200px"});
setTimeout(
function(){
$(".a").eq(ix).css({"width":"100px"});
}
,2000);
}
setInterval(
function(){
ae(i);
i++;
if(i===$(".a").length){
i=0;
}
}
,4000);
</script>
'HTML + CSS > JQuery' 카테고리의 다른 글
| JQuery - 이미지 슬라이드 효과 (0) | 2024.07.10 |
|---|---|
| JQuery - 이미지 페이드 인 아웃 (0) | 2024.07.10 |
| JQuery - 팝업창 나오게 하기 (0) | 2024.07.10 |
| JQuery - 메뉴바 나오게 하기 (0) | 2024.07.10 |
| JQuery 함수 기본 (0) | 2024.06.19 |