CODEWITHSUNDEEP
javascriptjquery
Uzumaki Naruto
Uzumaki Naruto

Reputation: 753

mouseup and mousedown not working together in jquery

Description:

I have the following code that works fine

$("#pom").mousedown(function(){
alert("mouse_down");    
});

It alerts when the mouse is down correctly

$("#pom").mouseup(function(){
alert("mouse_up");      
});

It works correctly when the mouse is up

The problem starts when I put something else other than alert. In my case I am adding a class to $("#pom") on mousedown and remove the class when mouse is up but its happening in one way only. The class does gets added when the mouse is down but does'nt gets removed when the mouse is up. Any solution is appreciated :)

Problem Demo :

Demo

Upvotes: 2

Views: 401

Answers (1)

nocarrier
nocarrier

Reputation: 129

Just a pointer. The commented bit its causing the issue.

.rotate{
    -webkit-transform: rotateY(50deg);
    /*-webkit-transform-origin: 0% 50%;*/
}

UPDATE:

I may be missing the point about what you want your code to do, but anyways the element wasn't rotating. Try this (tweak it to your heart content):

#pom
    {
        width: 200px;
        height: 100px;
        background-color: yellow;
        border-radius: 3px;
        border: solid #444444 3px;
    }
    .rotate
    {
        -ms-transform: rotate(45deg); /* IE 9 */
        -ms-transform-origin: 20% 40%; /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
        transform: rotate(45deg);
        transform-origin: 20% 40%;

    }

Finally, as Marc B points out, if you are moving the element on mousedown, chances are high that mouseup won't fire.

Upvotes: 2

Related Questions