試圖創建jQuery的鼠標懸停和鼠標事件

Question

我已經半成功地做到了這一點，但我得到了不一致和奇怪的行爲，我有點難以修復......它在mouseover和mouseout事件中的大約一半的時間工作。 ..不知道爲什麼，如果有人能夠至少指出我在正確的方向來解決問題，爲什麼和會是最滿的。

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'); 
}); 

請查看小提琴：http://jsfiddle.net/resonancedesign/Fgemx/

，你從觀看小提琴，我想添加和刪除類基於不同元素的鼠標懸停及移出事件的要素看...

如果有更優雅的方式做這個或簡單的東西我錯過了我自己的努力，從我的例子，我張開耳朵...

Answer 1

通過切換，你有時會添加這兩個類。

試試這個：

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

Answer 2

代碼的一些解釋。

首先，您需要一個添加轉換的元素（在您的情況下它會是＃effect-me）。現在，這只是告訴瀏覽器在元素樣式發生變化時該做什麼。它本身不會做任何轉換。

#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; 
} 

接下來，您需要爲元素添加新樣式，以便它可以從原始樣式過渡到新樣式。

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

現在你已經到位的元素，你只需要添加以添加懸停新樣式所需的JavaScript

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

一步到位http://jsfiddle.net/CqDNf/