jQuery Hover causes strange color change in unrelated text

To observe the phenomenon, hover over one of the broken image links and watch the nav at the top. This fiddle is a condensed version of a more complete website, so the phenomenon could be isolated.

HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
    <div class="wrapper">
        <div class="nav-container">
            <div class="nav_bg"></div>
            <div class="nav">
                <img src="images/logo.png" />
                <ul>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
        <div style="clear: both;float:none;width:100%;height:0px"></div>
        <div id="portfolio" class="portfolio">
            <h4>Check out our portfolio.</h4>
            <div class="framedivs">
                <div class="frame">
                    <a href="#">
                        <img src="/images/bound.png" />
                    </a>
                    <div>
                        <img src="/images/ignite_circle.png" />
                    </div>
                </div>
                <div class="frame">
                    <a href="#">
                        <img src="/images/bound.png" />
                    </a>
                    <div>
                        <img src="/images/ignite_a_circle.png" />
                    </div>
                </div>
                <div class="frame">
                    <a href="#">
                        <img src="/images/bound.png" />
                    </a>
                    <div>
                        <img src="/images/chadkent_circle.png" />
                    </div>
                </div>
                <div class="frame">
                    <a href="#">
                        <img src="/images/bound.png" />
                    </a>
                    <div>
                        <img src="/images/ihmg_circle.png" />
                    </div>
                </div>
                <div class="frame">
                    <a href="#">
                       ...

CSS

.wrapper {
    font-family: menschregular;
     color: #474138;
     text-shadow: 0px 1px 0px #ffffff;
     position: relative;   
     font-size: 1em;
     width: 1200px;
     height: 100%;
     margin: 0 auto;
}

h1 {
    font-family: 'wisdom_script_airegular';
    font-size: 4.2em;
    text-align: left;
    padding: 0px 0 50px 0px;
    text-shadow: 0 2px 0 #ffffff;
    width: 750px;
    }

h2 {
    font-family: menschregular;
    text-shadow: 0 2px 0 #ffffff;
    padding: 0 0 12px 0;
    color: #e43f40;
    font-size: 50px;
}

h3 {
    font-family: arial;
    font-weight: bolder;
    font-size: 25px;
    text-transform: uppercase;
    text-align: center;
}

h4 {
     font-family: 'wisdom_script_airegular';
    font-size: 4.2em;
    text-align: left;
    padding: 0px 0 40px 0px;
    text-shadow: 0 2px 0 #ffffff;
    text-align: center;
}

p {
    font-family: 'Junge', serif;
    line-height: 1.3;
    font-size: 1.05em;
}

a {
    font-family: menschregular;
    color: #474138;
    text-decoration: none;
    transition: 500ms;
    -moz-transition: 500ms;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
}

a:hover {
    font-family: menschregular;
    color: #E43F40;
    transition: 500ms;
    -moz-transition: 500ms;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
}

.logo {
    padding-left: 10px;
    padding-top: 30px;
    margin-bottom: -80px;
    width: 100%;
    clear: both;
}

#center {
    text-align: center;
}

/* menu styling */

.nav_bg {
    background-image: url('/images/nav_lines.png');
    background-repeat: no-repeat;
    background-position: -40px 1px;
    width: 100%;
    height: 290px;
    margin-bottom: -25px;

}

.nav-container {
    height: 300px;
    width: 100%;
}

.f-nav {
    background-image: url('/images/bg_img.gif');
    z-index: 9999;
    position: fixed;
    padding:30px 0 25px 0;
    top:0px;
    width: 100%;
}

.nav ul {
    padding-left: 280px;
}

.nav ul li {
    display: inline-block;
    padding-left:...

JavaScript

$(document).ready(function(){

    $(".frame a").hover(function(){
        $(this).siblings("div").addClass('in');

    }, function() {
        $(this).siblings("div").removeClass('in').animate();
        $(this).siblings("div").addClass('out').animate();
    });
});