jQuery: Animating two images with one function in different directions

Question

I'm attempting to use a single function to animate two different images. The issue I'm having is that one of the images needs to animate the left attribute and the other needs to animate the right. I attempted a few different things, but this is as far as I got:

    $(document).ready(function(){
        var puppy = $('.puppy'),
            woman = $('.woman-smiling');

        fadeImages(puppy, "left");
        fadeImages(woman, "right");
    });

    function fadeImages($image, $direction){
        $image.delay(500)
            .css({
                visibility: "visible",
                display: "none"
            }).animate({
                opacity: "show",
                $direction: "0px"
            }, 1750);
    }

The delay and fading work fine, but the direction is what's messed up. TIA!!!

Answer 1

I don't think you can use $direction like you are doing. Perhaps this would work:

function fadeImages($image, $direction){

    var properties = new Object();
    properties['opacity'] = "show";
    properties[$direction] = "0px";

    $image.delay(500)
        .css({
            visibility: "visible",
            display: "none"
        }).animate(properties, 1750);
}