jquery with javascript conditional statement

I have the following jquery code

$(document).ready(function() {

    $('.anipic').hover(function(){

        if ($(this).parent().position().left <= 700) {
            $('.bio').css({
                'height': $(this).height()+2,
                left: $(this).parent().width()
            });
        }

        if ($(this).parent().position().left >= 700) {
            $('.bio').css({     
                'height': $(this).height()+2,
                right: $(this).parent().width()
            });
        }

        $(this).css({'background-color':'#55CA开发者_高级运维DF'});

        $(this).siblings('.bio').animate(
            { width: '+=160px' }, 
            { easing: 'swing', complete: function() { $('.biotext').fadeIn(); } }
        );
    //endmouseover
    },

    function() {

        $(this).css({'background-color':'#ffffff'});

        $(this).siblings('.bio').stop().hide().css({'width':'0px'})
        $('.bio').hide();
        $('.biotext').hide();

    })
    //end

//enddocumentready
});

You can see the the page here http://afhboston.com/artists_listnew.php

Basically, the conditional statement gets ignored once I hover over the element that's position is less than 700px in it's parent and the element whose position is greater than 700px animates to the right istead of the left. I'm not having any luck figuring out this bug.

Try using else instead of two ifs. I suspect that the second condition always becomes true since you are changing the property of what you are inspecting.

if ($(this).parent().position().left <= 700){
    $('.bio').css({ 'height':$(this).height()+2,left:$(this).parent().width()});

    }else{

    $('.bio').css({ 'height':$(this).height()+2,right:$(this).parent().width()});
    }