jquery - CSS は、親にないときに要素を非表示にします

Question

jQuery と CSS を使用して、大きな三角形の内側で矢印が画面を横切るクールな効果を作成しました。問題は、移動する矢印が三角形の内側にあるときにのみ表示されるようにすることです。矢印の 1 ピクセルが三角形の内側にある場合でも、その部分が表示されるはずです。

デモ: http://jsfiddle.net/A4dc7/

CSS:

.arrow_first {
    position: absolute;
    top: -108px;
    left: -142px;
    border-left: 44px solid transparent;
    border-right: 25px solid transparent;
    border-top: 60px solid white;
    z-index: 10;
}
.arrow_second {
    position: absolute;
    top: -229px;
    left: -213px;
    border-left: 26px solid transparent;
    border-right: 14px solid transparent;
    border-top: 40px solid white;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    /* IE 9 */
    -webkit-transform: rotate(-5deg);
    /* Safari and Chrome */
    z-index: 7;
}
.arrow_third {
    position: absolute;
    top: -280px;
    left: -202px;
    border-left: 7px solid transparent;
    border-right: 5px solid transparent;
    border-top: 12px solid white;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    /* IE 9 */
    -webkit-transform: rotate(-5deg);
    /* Safari and Chrome */
    z-index: 5;
}
.arrow_fourth {
    position: absolute;
    top: -116px;
    left: -111px;
    border-left: 21px solid transparent;
    border-right: 7px solid transparent;
    border-top: 28px solid white;
    z-index: 10;
}
.arrow_five {
    position: absolute;
    top: -200px;
    left: -173px;
    border-left: 14px solid transparent;
    border-right: 4px solid transparent;
    border-top: 21px solid white;
    z-index: 8;
}
.arrow_six {
    position: absolute;
    top: -294px;
    left: -257px;
    border-left: 31px solid transparent;
    border-right: 20px solid transparent;
    border-top: 42px solid white;
    z-index: 8;
}

jQueryでやるべきだと思う$.parentのですが、IDの付け方がわかりません。