CODEWITHSUNDEEP
jquerycss
Saksham
Saksham

Reputation: 9380

CSS transform on click using jQuery

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.

Upvotes: 0

Views: 4317

Answers (4)

guramidev
guramidev

Reputation: 2238

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

Upvotes: 1

EduSanCon
EduSanCon

Reputation: 1929

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.

Upvotes: 0

guest271314
guest271314

Reputation: 1

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/

Upvotes: 0

Zach Saucier
Zach Saucier

Reputation: 25954

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

Upvotes: 1

Related Questions