How do I keep an element scaled in CSS3 in-till mouseleave? Then on mouseleave scale the element back to it's original size


Tags: jquery,css3,animation,hover,scale

Problem :

When I use mouseenter on a button I want the scale command in CSS3 animation to be triggered on a separate element.

My code currently does this, however I need the scale to stay at it's finished point in-till mouseremove, then the element that's scaled needs to scale back to initial dimensions.

How do I do this?

Here's my code:

$("#button").mouseenter(function() {
$('.transform').toggleClass('classname');
});

CSS:

.transform {
-webkit-transition: all 2s ease;  
-moz-transition: all 2s ease;  
-o-transition: all 2s ease;  
-ms-transition: all 2s ease;  
transition: all 2s ease;
}

.classname {
-webkit-animation: cssAnimation 1.000s 1 ease;
-moz-animation: cssAnimation 1.000s 1 ease;
-o-animation: cssAnimation 1.000s 1 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: scale(1.000) }
to { -webkit-transform: scale(0.800) }
}

Thank you.



Solution :

Use the .hover() event handler instead.

change mouseenter to hover

$("#button").hover(function() {
    $('.transform').toggleClass('classname');
});

Which is the same as

$("#button").on('mouseenter mouseleave', function() {
    $('.transform').toggleClass('classname');
});

The first part was based on how to remove the class..

But you do not need to use animations for the scaling.. just transitions will do.

And since transition go both ways by default it will handle the scale up automatically once you remove the class.

Demo at http://jsfiddle.net/3tsuS/


    CSS Howto..

    How to use an arrow for slideToggle indicator?

    How can I display an image as a menu item once the user has scrolled down the page 150px?

    how to get fixed header with css?

    How can I add a hover effect to icons with CSS? [closed]

    How to set dynamic responsive divs with only CSS (no javascript)?

    How to fit height of aside to body height

    How can I make images fit into a 200 pixel square box using CSS?

    How Do I Place An Image To The Right of a Body of Text?

    CSS vs jQuery How to create dynamic table style (zebra) without others plugins?

    How to disable IE11 WebBrowser control scaling

    How to achieve “paper-like” background effect? [closed]

    How to put all Array values in $_GET[]

    How to insert variables in inline CSS rules with pure JavaScript?

    Adding buttons to slideshow

    How to calculate percentages in LESS CSS?

    how to add css file to node js(not express) code

    text-rendering in css, what is it? and how to use it?

    How can I align a logo AND a heading to the centre of a page?

    How can I remove a text appearing in quotes after tag using CSS? [duplicate]

    How to increase the width size of JQuery UI Tooltip by its default value?

    How to Make a Banner Image?

    How to display UpdateProgress at the center of a grid view with CSS?

    How to get a different link color on my tumblr static page then my main (front page?)

    How to remove unused CSS but keep comments?

    How to create a medal in css [closed]

    How to make an external HTML file not appear in the home page?

    How to visually re-order elements in a scrolling dropdown input div?

    How to apply css to div which has no class?

    How do I apply CSS styles to Raphael.js objects using jQuery?

    how to align vertically an absolute element with a variable height above its parent?