I am facing a challenge where I need to modify an already transforming element when it is clicked. However, the current code does not trigger any action upon clicking.
While utilizing jquery-ui partially resolves the issue by bringing back the element to its original position and then scaling it upon click.
I prefer not to use jquery-ui and would like the previous revolving animation to halt on click, scaling the element at the point where the animation paused.
<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>
Visit this Fiddle link for reference.