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行，我想传入一个引用＆＃39; top＆＃39;的值。选项列表项的属性，以便指针div动画到与单击的列表项相同的位置，但是我不确定如何引用该属性。

有什么想法吗？

Answer 1

喜欢这个？

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

DEMO

Answer 2

DEMO HERE

检查一下。您不需要给出顶部位置，因为它对每个屏幕分辨率都不同

$(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
        });

    })
})

在jQuery中引用CSS属性

2 个答案: