CODEWITHSUNDEEP
jquery
piechart
piechart

Reputation: 43

How do I call different elements each time I use a jQuery function?

I'm assembling my site in a piecemeal fashion where I google search snippets of code and mechanical-turk my way to a solution. So apologies in advance if I am not asking the right question.

I have the first entry in my site working the way I want it to work. On click the divs slide left and reveal the content. Typically at this point I would just copy and paste my jQuery for each entry and change the values for the elements that are called. Instead I'd like to do it the "right" way. How would I get my script to fetch the elements that are required to move then move just them?

A 'keyword' that I can google and study up on may be all that I need to get on track. Here's what I put together...

Live Demo of the Script

<script type="text/javascript">
    $(document).ready(function() {
        $('#sVita').click(function() {
            $('#sVita').animate({
                'marginLeft' : "-150%" 
            });
            $('.secondView').animate({
                'marginLeft' : "5%" 
            });
            $('.invisibleBackButton').animate({
                'marginLeft' : "0"
            });         
        });

        $('.invisibleBackButton').click(function() {
            $('#sVita').animate({
                'marginLeft' : "-250px"
            });
            $('.secondView').animate({
                'marginLeft' : "+150%" 
            }); 
            $('.invisibleBackButton').animate({
                'marginLeft' : "-100%"
            });                     
        });     
    });
</script>

Upvotes: 1

Views: 44

Answers (1)

MorningDew
MorningDew

Reputation: 503

I say give all of your elements a class, for example class="animateMe"

then in your doc ready function

$(".animateMe").click(function() {
        $(this).animate({
        'marginLeft' : "-150%" 
        });
        $(this).siblings('.secondView').animate({
        'marginLeft' : "5%" 
        });
        $(this).siblings('.invisibleBackButton').animate({
        'marginLeft' : "0"
        });         
    });

Upvotes: 1

Related Questions