Jquery ui `removeClass` doesn't work

Question

this is my 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>

I want to remove out class and add in class using jquery-ui with effect. This is the code:

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

the code above doesn't work but if I remove jquery-ui reference and just use jquery to do the job with this code:

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

it works. I don't know what to do but I really need help. update this is my style(I think it may can effect the result)

<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>

I uploaded the code here

nitpick: Your code is full of globals because you are not declaring var. Var is not optional. — epascarello
– epascarello, Commented Jul 21, 2012 at 12:52
@epascarello: I added var but there is no change to act. it's still not working — Ahmadali Shafiee
– Ahmadali Shafiee, Commented Jul 21, 2012 at 12:56
@ahmadalishafiee var wasn't the problem you are trying to solve, but it was still a problem — Hunter McMillen
– Hunter McMillen, Commented Jul 21, 2012 at 12:57
Are there any errors on the page? Are you sure jQueryUI is included properly? — Andrew Whitaker
– Andrew Whitaker, Commented Jul 21, 2012 at 13:10

The Alpha · Accepted Answer · 2012-07-21 14:04:08Z

3

Try this

$(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.

answered Jul 21, 2012 at 14:04

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brandan · Accepted Answer · 2012-07-21 13:34:23Z

0

Where did you get that second parameter on add/remove class?

Use queue, use chaining, and make functions to reuse code.

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

edited Jul 21, 2012 at 13:34

Brandan

15k3 gold badges59 silver badges71 bronze badges

answered Jul 21, 2012 at 13:09

epascarello

208k20 gold badges206 silver badges246 bronze badges

2 Comments

Andrew Whitaker Over a year ago

The second parameter is added by jQueryUI's version of addClass:

Ahmadali Shafiee Over a year ago

I don't want delay!! I want animate with addClass method and Jquery-UI has it!

Collectives™ on Stack Overflow

Jquery ui `removeClass` doesn't work

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related