javascript - 在 jQuery 中引用 CSS 属性

Question

我有这个代码：http: //jsfiddle.net/cmac2712/dnLgD/

$(document).ready(function () {
    var setVisibility = function(n){
        $('#content1').css('visibility', 'hidden');
        $('#content2').css('visibility', 'hidden');
        $('#content3').css('visibility', 'hidden');
        $('#content4').css('visibility', 'hidden');

        $('#content' + n).css('visibility', 'visible');
    };    
    $('#op1').click( function () {
        setVisibility("1");
        $('.pointer').animate({
            top: '16px'
        });
    })
    $('#op2').click( function () {
        setVisibility("2");
        $('.pointer').animate({
            top: '38px'
        });
    })
    $('#op3').click( function () {
        setVisibility("3");
        $('.pointer').animate({
            top: '60px'
        });
    })
    $('#op4').click( function () {
        setVisibility("4");
        $('.pointer').animate({
            top: '82px'
        });
    })
})

在第 20 行，我想传入一个引用选项列表项的“顶部”属性的值，以便指针 div 动画到与单击的列表项相同的位置，但是我不确定如何引用它属性。

有任何想法吗？

Answer 1

像这样？

top: $(this).offset().top

演示

Answer 2

在这里演示

核实。您不需要给出顶部位置，因为每个屏幕分辨率都不同

$(document).ready(function () {


    var setVisibility = function(n){
        $('#content1').css('visibility', 'hidden');
        $('#content2').css('visibility', 'hidden');
        $('#content3').css('visibility', 'hidden');
        $('#content4').css('visibility', 'hidden');


        $('#content' + n).css('visibility', 'visible');
    };

    $('#op1').click(


    function () {
        setVisibility("1");
        $('.pointer').animate({
            top: $(this).offset().top
        });

    }

    )


    $('#op2').click(

    function () {
        setVisibility("2");
        $('.pointer').animate({
            top: $(this).offset().top
        });

    })

    $('#op3').click(

    function () {
    setVisibility("3");
        $('.pointer').animate({
            top: $(this).offset().top
        });
    })

    $('#op4').click(

    function () {
    setVisibility("4");
        $('.pointer').animate({
            top: $(this).offset().top
        });

    })
})