Referencing a CSS attribute in jQuery

Question

I have this code: 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'
        });
    })
})

On line 20 I want to pass in a value that references the 'top' attribute of the option list item so that the pointer div animates to the same position as the list item that is clicked, however I'm not sure how to reference that attribute.

Any ideas?

Anton · Accepted Answer · 2013-09-12 12:59:19Z

1

Like this?

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

DEMO

answered Sep 12, 2013 at 12:59

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saranya Sadhasivam · Accepted Answer · 2013-09-12 13:02:05Z

DEMO HERE

Check it. You need not give the top position because it differs for each screen resolution

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

    })
})

Collectives™ on Stack Overflow

Referencing a CSS attribute in jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related