CSS transform on click using jQuery

Question

I have a requirement that I need to transform an already transforming element when it is clicked. For the below code, nothing is happening on click.

Using jquery-ui solves the problem partially as on click it brings the element back to its original position and then scale.

I do not want to use jquery-ui and the previous revolving animation should stop on click and it should scale the element at the place where the animation stopped.

<html>
    <head>
        <style type="text/css">
            .divInner{
                -webkit-animation: myOrbit 5s linear infinite;
            }

            @-webkit-keyframes myOrbit {
                 from { -webkit-transform: rotate(0deg) translateX(20px) rotate(0deg); }
                 to   { -webkit-transform: rotate(-360deg) translateX(20px) rotate(360deg); }
            }
        </style>
        <script src="jquery-1.11.1.min.js" type="text/javascript"></script>
        <script>
        $(".divInner").click(function() {
            $(this).css('-webkit-transform','scale(1.3)');
        });
        </script>
    </head>
    <body>
        <div class="divOuter" style="padding:20px;">
            <div class="divInner" style="border:1px solid #ddd;width:30px;">
            hello
            </div>
        </div>
    </body>
</html>

here is the Fiddle link.

See this link... jsfiddle.net/keLPZ/1 It scales up on click. But I don't know about the position, where should it go. Please make it clear... Also the animation won't stop since it is through CSS and you have not done anything to stop it. — j809
– j809, Commented Jul 6, 2014 at 13:55

Zach Saucier · Accepted Answer · 2014-07-06 13:55:46Z

1

If you can only use one element, you'll have to get the transformation matrix of the element before the second animation is initialized, remove the first animation, set the properties to the transformation matrix that you saved earlier, and then start the second animation. This is because one element cannot have more than one transform applied to it at one time.

The better option would be to apply the click's effects to the parent instead, because that will scale both the parent and the child. You can have a div that otherwise does nothing as the direct parent if you'd like to not affect the layout of the page by changing .divOuter

answered Jul 6, 2014 at 13:55

Zach Saucier

26.2k12 gold badges101 silver badges161 bronze badges

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

1 Comment

Zach Saucier Over a year ago

@Saksham If an answer is satisfactory you can click the check mark next to the answer to mark it as such :) It also gives reputation to you and the answer-er

guramidev · Accepted Answer · 2014-07-07 04:56:05Z

Here is jsfiddle for your problem : http://jsfiddle.net/H5g5s/22/

It involves stopping animation at the current place, and continuing on the second click.I remade your animation using jQuery to manipulate it more easily on click.

Best Regards

HTML:

    <div class="divOuter" style="padding:50px;">
    <div class="divInner">
    hello
    </div>
    </div>

jQuery:

var interval,//for interval clearance
animation,//for animation freeze
start,//to determine start angle of rotation
duration;//to determine duration of animation

/*** TRANSFORM ANIMATION FUNCTION ***/
function animateDiv(startAngle){

//Determine whether animation should continue or start from 0
startAngle ? start = startAngle :  start = 0; 
//Determine duration in case animation continues for speed to remain same
duration = 5000/360 * (360 - start);
//Start animation 
animation = $({deg: start}).animate({deg: 360}, {
    duration: duration,
    easing:'linear',
    queue:false,
    step: function(now) {

        $('.divInner').css({
            '-moz-transform':'rotate(' + -now + 'deg) translateX( 20px ) rotate(' + now   + 'deg)',
            '-webkit-transform':'rotate(' + -now + 'deg) translateX(  20px ) rotate(' + now + 'deg)',
            '-o-transform':'rotate(' + -now + 'deg) translateX( 20px ) rotate(' + now + 'deg)',
            '-ms-transform':'rotate(' + -now + 'deg) translateX( 20px ) rotate(' + now + 'deg)',
            'transform':'rotate(' + -now + 'deg) translateX( 20px ) rotate(' + now + 'deg)'
        });

    }
}); 

}
/*** Call function ***/
animateDiv();
/*** Set interval for repeating ***/
interval = setInterval(function(){
animateDiv();
},5000);

/*** On click ***/
$(".divInner").click(function() { 

/*** Determine action stop or continue ***/
//Stop
if(!$(this).hasClass('active')){

    //Stop interval
    clearInterval(interval);
    //Freeze animation
    animation.stop();
    //Get current style
    var style = $(this).attr('style');
    //Add scale
    var stylescale = style.slice(0,(style.length-1)) + ' scale(1.3)';
    //attach new style
    $(this).attr('style',stylescale);

}
//Continue
else {

   /* get rotation value*/
   var str = $(this).attr('style');
   var rotate = str.search("rotate") + 8;
   var deg = str.search("deg");
   var angle = str.slice(rotate,deg);

   /* start animation again */    
   animateDiv(angle);
   /* sset interval again */
   interval = setInterval(function(){
       animateDiv();
   },5000);  

}

//Toggle class to determine action next time;
$(this).toggleClass('active');

});

CSS:

.divInner{
position:relative;
border:1px solid #ddd;
width:30px;
-moz-transform: rotate(0deg) translateX(20px) rotate(0deg);
-webkit-transform: rotate(0deg) translateX(20px) rotate(0deg);
-o-transform: rotate(0deg) translateX(20px) rotate(0deg);
-ms-transform: rotate(0deg) translateX(20px) rotate(0deg);
transform: rotate(0deg) translateX(20px) rotate(0deg);
cursor:pointer;
}

guest271314 · Accepted Answer · 2014-07-06 17:23:52Z

0

Try

html

<div class="divOuter" style="padding:20px;position:relative;left:200px;">
<div class="divInner" style="border:1px solid #ddd;width:35px;">
hello
</div>
</div>

js

$(".divOuter").click(function() {
    $(".divInner", this)[0].style.WebkitAnimation = "paused";
    $(this).css('-webkit-transform','scale(1.3)');
});

jsfiddle http://jsfiddle.net/guest271314/wRKL3/

answered Jul 6, 2014 at 17:23

guest271314

1

Comments

EduSanCon · Accepted Answer · 2014-07-06 17:41:25Z

0

Check this JSFiddle link:

$(".divOuter").click(function() { 
    $(this).toggleClass("pause");  
     $("#divInner").toggleClass("scale");
});

I've attached the webkit-animation to OuterDiv, and the scale transform to InnerDiv. This way I can stop the animation and make de scalation. For some unknown reason the first click doesn't stop the div where it should, but next clicks work fine.

answered Jul 6, 2014 at 17:41

EduSanCon

1,9391 gold badge12 silver badges9 bronze badges

Collectives™ on Stack Overflow

CSS transform on click using jQuery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related