Attempting to create jquery mouseover and mouseout events

Question

I have semi-successfully done this but am getting inconsistent and odd behavior that I am sort of stumped on fixing... It works about half of the time on the mouseover and mouseout events... Not sure why and would be most great-full if someone could at least point me in the right direction to a resolution.

HTML:

<div class="container">
    <div id="content">
        <header id="effect-me">
            <h1>sheikhart.com</h1>
        </header>
        <div class="row">
            <div class="shan-half">
                <div class="circle"><p>Shan</p></div>
            </div>
            <div class="lindsay-half">
                <div class="circle"><p>Lindsay</p></div>
            </div>
        </div>
    </div>
</div>

CSS:

/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
body, select, input, textarea { 
    color:#444;
}

/* www.aestheticallyloyal.com/public/optimize-legibility/ */
h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* maxvoltar.com/archive/-webkit-font-smoothing */
html {
    -webkit-font-smoothing: antialiased;
    background: url(images/index-bg.png) repeat-y center top;
    background-color: #111111;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}

sub {
    vertical-align: sub;
    font-size: smaller;
}

sup { vertical-align: super;
    font-size: smaller;
}

/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] {
    vertical-align: text-bottom;
}

input[type="checkbox"] {
    vertical-align: bottom;
    *vertical-align: baseline;
}

.ie6 input { 
    vertical-align: text-bottom;
}

/* hand cursor on clickable input elements */
label, 
input[type=button], 
input[type=submit], 
button {
    cursor: pointer;
}

/* These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink. */
::-moz-selection {
    background: #fb8a00;
    color:#fff;
    text-shadow: none;
}

::selection {
    background:#fb8a00;
    color:#fff;
    text-shadow: none;
}

/*  j.mp/webkit-tap-highlight-color */
a:link { 
    -webkit-tap-highlight-color: #FF5E99;
}

/* always force a scrollbar in non-IE */
html {
    overflow-y: scroll;
}

/* make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {
    width: auto;
    overflow: visible;
}

/* bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img {
    -ms-interpolation-mode: bicubic;
}


/*******************************
 * Non-semantic helper classes *
 *******************************/

/* for image replacement */
.ir {
    display:block;
    text-indent:-999em;
    overflow:hidden;
    background-repeat: no-repeat;
}

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden {
    display:none;
    visibility:hidden;
}

/* Hide only visually, but have it available for screenreaders
   www.webaim.org/techniques/css/invisiblecontent/
   Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */
.visuallyhidden {
    position:absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {
    visibility: hidden;
}

/* >> The Magnificent CLEARFIX << */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix { 
    display: inline-block; 
}

* html .clearfix {
    height: 1%;
} /* Hides from IE-mac \*/

.clearfix {
    display: block;
}

/* Fontface */

@font-face {
    font-family: 'abeatbykairegular';
    src: url('fonts/abeatbykairegular-webfont.eot');
    src: url('fonts/abeatbykairegular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/abeatbykairegular-webfont.woff') format('woff'),
         url('fonts/abeatbykairegular-webfont.ttf') format('truetype'),
         url('fonts/abeatbykairegular-webfont.svg#abeatbykairegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*  Primary Styles
 *  Author: Resonance Design (Richard Bakos)
 *  Web: http://www.resonance-design.net
 */

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

hr {
    max-width: 1200px;
    margin: 1em auto;
    border-bottom: 0;
    border-top: 1px solid rgba(191, 191, 191, 0.5);
}

header {
    width: 300px;
    background: #111;
    border: 1px solid #FFF;
    border-radius: 10px;
    margin: auto;
    text-align: center;
}

header h1 {
    width: auto;
}

.effected-1 {
    border-color: #FF7700;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition:width all 1s;
}

.effected-2 {
    border-color: #FFFFFF;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition:width all 1s;
}

.container {
    width: 100%;
    max-width: 1200px !important;
    display: table-cell;
    vertical-align: middle;
    margin: auto;
}

#content {
    width: 100%;
    max-width: 1200px !important;
    margin: auto;
}

.row {
    width: 100%;
}

.shan-half {
    width: 50%;
    float: left;
    vertical-align: middle;
}

.lindsay-half {
    width: 50%;
    float: right;
    vertical-align: middle;
}

.circle {
    border-radius: 50%;
    background: #fff;
    width: 200px;
    height: 200px;
    margin: auto;
    font-size: 20px;
    text-align: center;
    color: #111;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition:width all 1s;
}

.circle:hover {
    background: #FF7700;
    cursor: pointer;
    color: #FFF;
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

.circle p {
    padding-top: 90px;
}

JS:

$('.circle').mouseover(function() {
    $('#effect-me').toggleClass('effected-1');
});
$('.circle').mouseout(function() {
    $('#effect-me').toggleClass('effected-2');
});

Please view the Fiddle: http://jsfiddle.net/resonancedesign/Fgemx/

As you will see from viewing the fiddle, I am trying to add and remove a class to an element based on the the mouseover and mouseout events of a different element...

If there is a more elegant way of doing this or something simple I missed in my own efforts from the example, I am open ears...

Answer 1

Some explanation of the code.

First you'll need an element to which to add the transition (in your case it will be #effect-me). Now, this is just telling the browser what to do when the style of the element changes. by itself it won't do any transitions.

#effect-me {
    border: 1px solid #fff;
    -moz-transition: border 1s ease-out;
    -webkit-transition: border 1s ease-out;
    -o-transition: border 1s ease-out;
    transition: border 1s ease-out;
}

Next you'll want to add a new style for the element, so it can transition from the original style to the new one.

#effect-me.on { border: 1px solid #f70 }

Now that you have the elements in place, you just need to add the javascript needed to add the new style on hover

$('.circle').hover(
    function(){
        $('#effect-me').addClass('on');
    },
    function(){
        $('#effect-me').removeClass('on');
    }
);

everything in place http://jsfiddle.net/CqDNf/

Answer 2

By toggling, you are sometimes adding both classes.

Try this:

$('.circle').mouseover(function() {
    $('#effect-me').attr('class', 'effected-1');
});
$('.circle').mouseout(function() {
    $('#effect-me').attr('class', 'effected-2');
});