jQuery UI的`removeClass`不起作用

Question

這是我的HTML

<div id="c"> 
    <div class="base"> 
     <div class="cb out" id="red" data-color="Red"> 
     </div> 
    </div> 
    <div class="base"> 
     <div class="cb out" id="green" data-color="Green"> 
     </div> 
    </div> 
    <div class="base"> 
     <div class="cb out" id="blue" data-color="Blue"> 
     </div> 
    </div> 
</div> 

我想刪除out類和使用jQuery的用戶界面與效果添加in類。這是代碼：

//focuse mouseower 
    function fmo(element) { 
     var $element = $(element); 
     $element.removeClass("out"); 
     $element.addClass("in",300); 
    } 

    //blur mouseout 
    function bmo(element) { 
     var $element = $(element); 
     $element.removeClass("in"); 
     $element.addClass("out",300); 

    } 
    function ready() { 
     $(".cb").mouseover(function() { fmo(this); }); 
     $(".cb").mouseout(function() { bmo(this); }) 
     $(".cb").focus(function() { fmo(this); }); 
     $(".cb").blur(function() { bmo(this); }); 
    } 
    $(function() { ready(); }); 

上面的代碼不工作，但如果我刪除的jQuery UI的參考，只是使用jquery使用此代碼做的工作：

//focuse mouseower 
    function fmo(element) { 
     var $element = $(element); 
     $element.removeClass("out"); 
     $element.addClass("in"); 
    } 

    //blur mouseout 
    function bmo(element) { 
     var $element = $(element); 
     $element.removeClass("in"); 
     $element.addClass("out"); 

    } 
    function ready() { 
     $(".cb").mouseover(function() { fmo(this); }); 
     $(".cb").mouseout(function() { bmo(this); }) 
     $(".cb").focus(function() { fmo(this); }); 
     $(".cb").blur(function() { bmo(this); }); 
    } 
    $(function() { ready(); }); 

它的工作原理。我不知道該怎麼做，但我真的需要幫助。 更新 這是我的風格（我認爲這可能會影響結果）

<style type="text/css"> 
    .out { 
     display: inline-block; 
     margin-left: 5px; 
     background-color: #56a100; 
     opacity: 0.5; 
     margin: auto; 
     width: 70%; 
     height: 70%; 
    } 

    .in { 
     display: inline-block; 
     margin-left: 5px; 
     background-color: #56a100; 
     opacity: 1; 
     margin: auto; 
     width: 100%; 
     height: 100%; 
    } 

    .base { 
     display: inline-block; 
     width: 50px; 
     height: 50px; 
     margin-left: 5px; 
     margin-top: 100px; 
    } 
</style> 

我上傳的代碼here

Answer 1

試試這個

$(function(){ 
    $(".cb").on('mouseenter', function(){ 
     $(this).stop(1,1).removeClass("out").addClass("in", 300); 
    }) 
    .on('mouseleave', function(){ 
     $(this).stop(1,1).removeClass("in").addClass("out",300); 
    }); 
});​ 

DEMO.

Answer 2

你在哪裏買的上添加第二個參數/刪除類？

使用隊列，使用鏈接，並使函數重用代碼。

function helper (_elem, add, remove){ 
    var elem = $(_elem); 
    elem.removeClass(remove).delay(300).queue(
    function(next){ 
     elem.addClass(add); 
     next(); 
    } 
); 
} 

//focus mouseower 
function fmo() { 
    helper(this, "in","out"); 
} 

//blur mouseout 
function bmo() { 
    helper(this, "in","out"); 
} 

function ready() { 
    $(".cb").on("mouseover focus", fmo).on("mouseout blur", fmo); 
} 
$(ready);