CODEWITHSUNDEEP
jquerycss
Mona Coder
Mona Coder

Reputation: 6316

jQuery CSS3 Transforms not Working to Rotate a DiV

I am trying to rotate a soan class called .arrow on mouseenter event to 90 degree. This is easily possible with CSS3 transformation as:

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

I tried to use same code in jquery but it is not working! Can you please let me what is wrong with my code? 

$( document ).ready(function() {
   $(".list").on("mouseenter", function() {
      $( '.arrow' ).css({'background-position':'0px 0px',
                         '-webkit-transform': 'rotate(90deg)',
                         '-moz-transform': 'rotate(90deg)',
                         '-o-transform': 'rotate(90deg)',
                         '-ms-transform':'rotate(90deg)',
                         'transform': 'rotate(90deg)'
      });
    });
 });

UPDATE

Here is the JSFIDDLE Link

and code is like

<div class="list"></div>
<p>
<div class="arrow"></div>

$( document ).ready(function() {
   $(".list").on("mouseenter", function() {
       $( '.arrow' ).css({'background-position':'0px 0px',
                          ' -webkit-transform': 'rotate(90deg)',
                           '-moz-transform': 'rotate(90deg)',
                           '-o-transform': 'rotate(90deg)',
                           '-ms-transform':'rotate(90deg)',
                            'transform': 'rotate(90deg)'
                         });

   }).on("mouseleave", function() {
     $( '.arrow' ).css({'  -webkit-transform': 'rotate(-90deg)',
                           '-moz-transform': 'rotate(-90deg)',
                           '-o-transform': 'rotate(-90deg)',
                           '-ms-transform':'rotate(-90deg)',
                           'transform': 'rotate(-90deg)'
    });
}); 
});

IMPORTANT the code rotate without using the second part of the code. I mean the .on("mouseleave" part if you delete that part first part of code rotates the box!

Upvotes: 0

Views: 299

Answers (1)

avrahamcool
avrahamcool

Reputation: 14094

Pure CSS solution

You don't need to use a script for that, use CSS hover pseudo selector instead.

Check out this Working Fiddle

much simpler, cleaner, and easier to understand.

HTML: (nothing new here)

<div class="list"></div>
<p>
<div class="arrow"></div>

CSS:

.list
{
    width:150px;
    height:150px;  
    background-color:red;
}

.arrow{
    width:250px;
    height:350px; 
    background-color:blue;
}

.list:hover ~ .arrow
{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Script

If you have to use a Script, use .hover(). the hover function takes two arguments,

first argument: function for mouse in

second argument: function for mouse out. again, this will be cleaner and easier to understand.

and finally: why is your code not working? because the rotation is applied on the initial position of the element, so rotate(90) and rotate(-90) are pretty much the same (at least for for rectangles). if you want it to go back to normal when the mouse leaves, you'll have to apply rotate(0) Check out this Working Fiddle (this is your old code, I really recommend you to use the CSS way, or that way)

also: notice the whitespace you had before webkit.

Upvotes: 1

Related Questions