Hi I am doing a zoom in & out using jquery animate. The problem is it is too slow and takes too much of time. The animate function is going to zoom approximately 100's of divs. Can some one please tell me what should be done to make it optimized. Here is the code below
//Zoom In by clicking the plus button
$("div#explanation .plus").click(function(){
jsPlumb.repaintEverything();
/* var strongFont = parseFloat($("div.window strong").css('font-size'));
var newStrongFont = strongFont + 2;
//alert("the new font is"+strongFont);
*/
$("div#demo1").animate({'height':'+=20', 'width':'+=20'});
$("div.window ").animate({
'height':'+=20px', 'width':'+=20px'
},0,function(){
jsPlumb.repaintEverything();
});
/* $("div.window strong").animate({
fontSize:newStrongFont
},0,function(){
jsPlumb.repaintEverything();
});
*/
});
I am having similar to zoom out. Please guide me. Thanks!
First off, you have to realize that you're almost certainly not going to get good performance aniating hundreds of elements. It's just too much for the browser to handle. I would try to animate a single container element to achieve whatever effect you're going after.
That said, you might want to take a look at the animate-enhanced plugin. In browsers that support CSS animation, the plugin automatically translates .animate(...) calls into CSS animations, which are usually hardware-accelerated. This gives much better performance than animate's usual method of changing an element's properties on a set interval.
You might also try using CSS animation directly if the plugin doesn't help. I'm not sure whether you're really trying to animate the size of the box or if you're trying to animate an actual zoom (where the box and all of its contents get bigger), but here's an example that animates the latter:
div {
width:200px;
height:200px;
background:red;
color:white;
margin:20px 50px;
padding:5px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
}
div:hover {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-animation-name: popin;
-moz-animation-name: popin;
-webkit-animation-duration: 350ms;
-moz-animation-duration: 350ms;
}
#-webkit-keyframes popin {
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(1.4);
}
}
#-moz-keyframes popin {
from {
-moz-transform: scale(1);
}
to {
-moz-transform: scale(1.4);
}
}
The time for the animation to complete is something you can specify as the second argument to .animate(). You have not specified it so the default is 400ms. You can set it to whatever you want. The animation will always complete in approx the time that you set, but if there is too much work for the computer to do in that time to show you a smooth animation, you will get a jumpy one.
The only way to make an animation less jumpy is to optimize what you are animating or how you are animating it. Animating 100s of divs at the same time is probably more than anything but a very, very fast computer can do smoothly.
You will probably want to rethink what you are animating. One possible work-around in cases like this to animate an outline rather than the entire contents when the contents are really complex to animate with good performance.
If you want further help, you will have to show us more of the problem. We need to see the HTML you have so we can see what you're really trying to animate and we probably need to see the repaintEverything() function to see what it's doing.
If you're not too concerned about older browsers, you might be able to use css transform properties for this. They usually work quite quickly, allowing you to efficiently zoom in on a complicated section of the document. Here's a contrived example, which uses jQuery to zoom in on something whenever it's clicked. Animating would get more complicated: I don't believe jQuery's animate works with transform, but in theory you could repeatedly adjust the scale on a small level using timeouts.
Related
The effect I am trying to achieve needs to keep the center in its place and zoom in the content while still maintaining the width and height of the div.
An example:
before -> after
[x] [X]
Or if you don't mind links this site has it implemented on the homepage and its square containers
I have tried using the inspect element feature, but didn't really find any javascript calls or css on it. And google also didn't give me any tutorial, guess it's hard to name this effect.
Therefore, if someone could be so kind and forward me to a tutorial, function or give some tips I would greatly appreciate it.
Looking forward yo your replies.
You're looking for CSS Transforms.
On the website in question, this is implemented by way of
.view-tenth img {
/* [other directives omitted] */
transition: all 0.6s ease-in-out 0s;
}
.view-tenth:hover img {
/* [other directives omitted] */
transform: scale(1.1) rotate(0deg);
}
I have some javascript that slows down my page fade-in animation. I am wondering how it would be possible to prevent javascript from firing until my css3 animations have reached an end? Or at least fire the javascript after X amount of seconds.
Do you have any advice? Im still new to JS so any critics and feedback is welcome as I love to learn news things.
I thought of adding all scripts after window onload but it doesnt really help.
Thank you in advance for your feedback,
In chrome you can try:
window.ontransitionend - for css transitions
window.onwebkitanimationend - for css animations
I have used them in the past. The event contains the class name of the animation.
an example:
the css
#-webkit-keyframes doubleme {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(2);
}
}
.tag:hover {
-webkit-animation: doubleme 1s;
}
the javascript
window.onwebkitanimationend = function (event) {
console.log(event.animationName,event.srcElement.className);
// if correct animation
// execute javascript
};
then execute you javascript after you get the correct end to your animation.
You can use .delay on the Javscript to delay how long before it fires. http://api.jquery.com/delay/
I've been following directions from Justin Aguilar's Site to add some CSS Animations to my website. It's well put together and seems fairly straightforward. However I've been having a major problem triggering entrance animations.
Being fairly new to this I understand this question can be completely inane, but I've been toying with it for the last few days with no success.
To create an entrance the element's visibility is initially set to 'hidden'. Then javascript is supposed to trigger the animation by adding the .pullUp class which causes the element to become visible and animate.It seems pretty simple, but all of my elements begin animating as soon as the page loads or they remain invisible.
I could really use some help. Here is a Link to the code on JFiddle.
<img src="img/apple.png" id="apple" class="pullUp" />
<script= "text/css">
.pullUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
visibility: visible !important;
}
</script>
<script>
$(window).scroll(function() {
$('#apple').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+150) {
$(this).addClass(".pullUp");
}
});
</script>
Basically I just need my image to become visible and animate when the image is scrolled to.
It's possible that my site's Bootstrap Frameworks could be the source of the problem, but I don't see why it would. Also please know that I use External Style Sheets and just included all of the code here for convenience. Any insight or help is much appreciated!
I forked your JSFiddle
You were missing }); at the end of your code block. That's why jQuery wasn't working.
Your image had the pullUp class already added, so the animation was starting right away.
I noticed in your CSS where you have floats you did not specify a position (i.e position:relative or position:absolute). That's crucial for this type of thing (edit: apparently not, as show by the answer below).
After adding in position:relative to those elements it seems to work, however you might need to modify the animation as the effect seems quite minimal.
Does anyone know why I can't see the effects of the content property in my keyframe animation?
I tried something like
#-webkit-keyframes mymove {
0.000% {-webkit-transform: matrix(1,0,0,1,294,-135);
color:blue;
content:"test";
}
/*... more keyframes that changed the -webkit-transform property...*/
}
When I was watching my animated HTML div during the animation, I could see the effects of the -webkit-transform and color properties, but not the content property. It's as if the content property wasn't even applied during the animation. jQuery didn't return a value either when I did $(<my animated html element>).css("content"); However, repeatedly testing $(<my animated html element>).css("-webkit-transform") returned different values as the div moved across the screen.
I don't necessarily want to use the content property to display anything. I want to be able to store some meta data in the CSS keyframe rule so that I can refer back to the corresponding percentage at which the animation is at. I need to be able to run an animation on an infinite loop, and periodically query the animated HTML element to figure out how far along it is in the animation. I thought that I could use the content property to just put arbitrary strings, but it's not working on Chrome or Firefox. Does anyone have any ideas how I'd store metadata within the keyframe CSS rule?
I dont fully understand what you are trying to say when you are storing the metadata in keyframe.. In anyway, jquery or the javascript cannot read the css3 'content' data. Also I am pretty sure you cannot use content property inside the keyframe. you either need to use :after or :before. eg.
#box:before {
content: "test";
}
If you want the animation run infinte, you can use
-webkit-animation: mymove 5s infinite;
Let me know if this works.
Check this url http://msdn.microsoft.com/en-us/library/ie/jj680076(v=vs.85).aspx.
This article works good on Internet Explore 9+
For another browsers other than IE 9+, you need to copy and paste the css3 animation keyframe with vendor specific keywork.
for eg. for chrome you have to write the css in the article as:
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.TransformDemoDivFadeOut:hover {
animation-duration: 2s;
animation-name: fadeOut;
#-webkit-animation-duration: 2s;
#-webkit-animation-name: fadeOut;
}
#-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
I'm looking for a light weight solution to have an HTML element like a div or an li flash one background color, like solid green, then fade to another color over some time period like fading to white over 3 secs.
I don't want to include some massive library like jquery, and I only need this to work on Firefox, the most light weight the solution the better!
I know I could do this with javascript fairly easily, but it won't be very lightweight and I figure there must be some way to do this with CSS, that would be the ideal solution in my opinion.
Use an animation. Keep in mind you may need to prefix this to get it work on all target browsers.
HTML
<div id='flashMe'></div>
CSS
#flashMe {
height:500px;
width:500px;
background:black;
animation: flash 3s forwards linear normal;
}
#keyframes flash {
0% {
background:black;
}
4% {
background:green;
}
100% {
background:red;
}
}
You could take a look at CSS3 Animations. I am not that good with CSS3 so I can't provide any solution but afaik CSS3 can do stuff like this.
http://www.w3schools.com/css3/css3_animations.asp