해당코드 더 짧게 할 수 있는 방법 있을까요?
본문
$(document).ready(function() {
$(window).scroll( function(){
$('.mb-pick-wrap').each( function(){
var mb_pick_wrap = $(this).offset().top + $(this).outerHeight() / 5;
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > mb_pick_wrap ){
$(this).animate({'opacity':'1'},800);
}
});
$('.Dr_fixed_Bg').each( function(){
var Dr_fixed_Bg = $(this).offset().top + $(this).outerHeight() / 5;
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > Dr_fixed_Bg ){
$(this).animate({'opacity':'1'},800);
}
});
$('.other-site-move').each( function(){
var other_site_move = $(this).offset().top + $(this).outerHeight() / 5;
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > other_site_move ){
$(this).animate({'opacity':'1'},800);
}
});
});
});
클래스명만 다를뿐 나머지 효과는 같은데 더 코드를 짧게 할 수 있는 방법 있을까요?
답변 1
공통 클래스 하나 주시고
예를들어
<div class='mb-pick-wrap set_class'></div>
<div class='Dr_fixed_Bg set_class'></div>
<div class='other-site-move set_class'></div>
이런식으로 set_class 라는 공통 클래스를 선언하면
아래처럼 될듯한데요.
$(document).ready(function() {
$(window).scroll( function(){
$('.set_class').each( function(){
var target_cls = $(this).offset().top + $(this).outerHeight() / 5;
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > target_cls ){
$(this).animate({'opacity':'1'},800);
}
});
});
});
오.. 되네요 감사합니다