How do I invoke a CSS3 transition using JavaScript? - javascript

When I click on a button, I want a div to rotate, just as I would do with a CSS3 transition: rotate(350deg);. How would I do this with either CSS or JS? (If it can be done with CSS I'd perfer that instead)

In the onclick event of the button, put:
document.getElementById("yourDivId").className += " rotate";
In the CSS:
#yourDivId {
transition: transform 1s;
}
.rotate {
transform: rotate(360deg);
}
You'd have to add the browser specfic prefixes (-moz-, -webkit-) to the transition and transform, but this should work for you.

Related

Transform isn't working with jQuery .animate()

I noticed that whenever I try to use transform with a jQuery animation in the css section, it doesn't go off. It is the only property not working for me.
I am trying to use:
$(myElement).animate({
opacity: 1,
transform: "scale(1.5)"
}, 7000);
But the above code only passes the opacity animation, ignoring the transform.
One solution would be to use css for the animation and jquery to add the class that does the animation.
$(myElement).addClass("animate");
.animate {
transition: all 7s;
transform: scale(1.5);
}
Using the .animate() function, this would work.
$(myElement).animate({
height: ($(this).height()*1.5),
width: ($(this).width()*1.5)
}, 7000);

Reliable hover detection with animation in JavaScript?

It seems that jquery hover (and presumably the underlying browser events) cannot be reliably used to keep track of which element the mouse is over when animations are involved, since the events do not fire if an element moves under or away from the mouse (rather than the mouse moving into the element).
See this fiddle for an example of the issue I'm having. If you hover over the div, the state according to the hover tracking events always disagree with reality, at least by the end of the animation.
I haven't tested this outside chrome, but I'm assuming the same behaviour across browsers.
HTML:
<div>hover me</div>
<p>state</p>
CSS:
div {
-ms-transition: -ms-transform 1s;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
}
div:hover {
position: relative;
-ms-transform: translateX(200px);
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
JavaScript:
$('div').hover(function() {
$('p').text('over');
}, function() {
$('p').text('out');
});
While the fiddle isn't a realistic example, I'm experiencing this issue in a webpage with animations. The question I have is how do I ensure that my javascript correctly knows the hover state after animations? I'd like to do this without having a global mousemove event to follow the mouse (i.e. so that I can look for the element under the last coordinate at the end of each animation).

How to add zoom in / out on click to all img html tags?

What is the simplest way to add zoom in / out on click to all images in an html document (img tags)?
I'm editing a document in HTML and would like to stay focused on the content of this document. Due to this I would rather avoid adding any additional div elements around img element, at least in the source document.
Is there any simple javascript module which I can just plug-in for this purpose?
To clarify. Simple:
img:hover {
height: 400px;
}
would almost do the job for me but:
it cracks the layout
works with hover and I would prefer work on click.
Based on Paulie_D answer here is what I eventually came up with:
Works fine in Chrome & IE9. I tried to add this script to Paulie_D answer but my edit was rejected there - so here it is:
<style>
img {
cursor: pointer;
transition: -webkit-transform 0.1s ease
}
img:focus {
-webkit-transform: scale(2);
-ms-transform: scale(2);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
var imgs = document.querySelectorAll('img');
Array.prototype.forEach.call(imgs, function(el, i) {
if (el.tabIndex <= 0) el.tabIndex = 10000;
});
});
</script>
Anything that changes the height of the image is likely to break your layout.
Accordingly you should be looking at (IMO) transform: scale(x)
JSFiddle Demo (using :active as mousedown - just click & hold)
CSS
img {
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
}
img:active {
-webkit-transform: scale(2);
transform: scale(2);
}
add zoom in / out on click to all images in an html document (img tags)
See this fiddle
JQuery
$('img').each(function(){
$(this).click(function(){
$(this).width($(this).width()+$(this).width())
});
});
The above code will add zoom-in functionality to all img tags.
There are many jQuery plugins are available for zooming the images. Few are
http://plugins.jquery.com/image-zoom/
http://www.elevateweb.co.uk/image-zoom/examples

How to zoom in to the center of a div

I want to create a zoom in effect on my large div. I have searched many questions and still don't know how this work.
I want to be able to zoom into the center of the user screen instead of the set position.
http://jsfiddle.net/kB27M/1/
I have tried css3 zoom feature and animate zoom property but still can't pull this one. Can anyone help me about it? Thanks a lot!
You should scale the div:
.scaled {
-moz-transform: scale(3);
-webkit-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}
div {
transition: all 500ms ease-in;
}
Simply apply the CSS class to the div and then use the transitionEndevent to apply further styles via .animate().
On transitionEnd (discard live(), use on()): jsfiddle

Changing css property from js breaks css animation

I have a button with hover effect on it (color changes).
button {
width: 180px;
height: 80px;
background-color: #A0522D;
}
button:hover {
background-color: #CD853F;
}
Then, from js I want to change background-color, for example when the button chosen is correct one. That is what I came up with:
buttons[i].style.backgroundColor = "#A0522D";
I also have transition property for animation:
button {
transition: background 0.5s ease, color 0.2s ease;
}
It appears that whenever I change background-color for the first time, it completely removes hover animation. That is not the case when I change font color, not background color, though.
Do you have any idea how to have both hover animation and js animation changing bgcolor working at the same time? Or could it be that my approach to animate buttons is not right?
This has to do with the specificity of your CSS rules. Rules set on the element (by setting the style property, for instance) will have higher specificity than those you declare in a CSS file/style block (unless you use !important).
The better approach would be to use classes to set the background property and to change those on the element instead of setting the style directly:
buttons[i].className = "myClass";
This StackOverflow answer has a great description of how to set CSS classes in javascript. You can read more details about CSS specificity in this article.
You could change the class with javascript.
$('#yourElem').click(function(){
$(this).toggleClass('on')
})
and then manage all your transitions with css
#yourElem { background-color:red; transition: background-color 500ms ease; }
#yourElem.on { background-color:blue; }
This will transition the two on click.
Then so long as you dont out specify the hover element with the new transition you can do both.
#yourElem { color:black; background-color:red; transition: background-color 500ms ease, color 500ms ease; }
#yourElem:hover { color:pink; }
#yourElem.on {color:white; background-color:blue; }
you can use jquery to change the css which might help ?
using on hover and the jquery colour library https://github.com/jquery/jquery-color
$('node').animate({ backgroundColor: "#f6f6f6" }, 'fast');

Categories