jquery with javascript conditional statement
<p>I have the following <a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged 'jquery'" rel="tag">jquery</a>  code</p>

<pre><code>$(document).ready(function() {

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

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

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

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

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

<p>You can see the the page here <a href="http://afhboston.com/artists_listnew.php" rel="nofollow">http://afhboston.com/artists_listnew.php</a></p>

<p>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.</p>
