單個元素的Javascript

Question

我在網站上寫了一點javascript，當它們出現在視圖中時，它們會淡化元素。但效率很低。

<script type="text/javascript" charset="utf-8"> 
    $(function() { 


$('a.reposition.r1').bind('inview', function (event, visible) { 
    if (visible) { 
    $("a.reposition.r1").css({"opacity": "1", "transition": "1s"}); 
    } else { 
    $("a.reposition.r1").css({"opacity": "0", "transition": "1s"}); 
    } 

}); 

$('a.reposition.r2').bind('inview', function (event, visible) { 
    if (visible) { 
    $("a.reposition.r2").css({"opacity": "1", "transition": "1s"}); 
    } else { 
    $("a.reposition.r2").css({"opacity": "0", "transition": "1s"}); 
    } 

}); 

$('a.reposition.r3').bind('inview', function (event, visible) { 
    if (visible) { 
    $("a.reposition.r3").css({"opacity": "1", "transition": "1s"}); 
    } else { 
    $("a.reposition.r3").css({"opacity": "0", "transition": "1s"}); 
    } 

}); 


}); 
</script> 

我試圖使它更緊湊，像這樣：

<script type="text/javascript" charset="utf-8"> 
    $('a.reposition').bind('inview', function (event, visible) { 
     if (visible) { 
     $("a.reposition").css({"opacity": "1", "transition": "1s"}); 
     } else { 
     $("a.reposition").css({"opacity": "0", "transition": "1s"}); 
     } 

    }); 


</script> 

但現在所有元素淡入當用戶滾動第一元素插入口。我想讓每個元素在移入視口時逐漸淡入。如何才能做到這一點？

Answer 1

使用this獲得正被稱爲

$('a.reposition').bind('inview', function (event, visible) { 
    if (visible) { 
    $(this).css({"opacity": "1", "transition": "1s"}); 
    } else { 
    $(this).css({"opacity": "0", "transition": "1s"}); 
    } 
}); 

，並擺脫重複代碼的當前元素：

$('a.reposition').bind('inview', function (event, visible) { 
    var opacity = visible ? "1" : "0"; 
    $(this).css({"opacity": opacity, "transition": "1s"}); 
});