CSS flipping page "trembles" - javascript

I'm trying to create a flipping page effect with pure CSS. I found this code and now I'm trying to customize it. Basically I want the flipping animation to happen once the page is loaded. So I did this. Now instead of #page-flip:hover #s3 (for example) I have .hover #s3 and I add hover class to #page-flip with JS:
window.addEventListener('DOMContentLoaded', init);
function init(){
setTimeout(function(){
document.getElementById('page-flip').classList.add('hover')
}, 100);
}
It works just fine. The problem is, on both animations I see a little page "trembling" when the animation starts. I'm trying to get rid of it for hours and for now no luck. Any suggestions, please?

Related

Make fade in-out effect runs infinite (pure JS, not jQuery)

I was searching a script to make a div to fade in and out, and found this question fade in and fade out in pure javascript without jquery
User bgoldst gave a nice solution that worked for me. But I would need the fade in-out to run in loop, not just once as stated by bgoldst's code. I'm totally new at JS and don't know how to get it to work, any suggestion?
EDIT: I have found a intermediate solution with Luke's suggestion and Kai's suggestions from Pure JavaScript fade in function
That is
<script type="text/javascript">
var div = document.getElementById("foo");
setInterval(function() {
div.style.transition="opacity 1.5s";
div.style.opacity=0;
}, 1500);
setInterval(function() {
div.style.transition="opacity 1.5s";
div.style.opacity=1;
}, 3005);
</script>
However, the fade in/out effect doesn't have a symmetric behaviour.
You can use CSS for that, no Javascript necessary. Just use the CSS animation property (set keyframes if you want, etc), and then set this property:
animation-iteration-count: infinite;
Based on your comment, here is a Pen I made that will do what you want - you'll just have to change the animation from changing background color to making it fade. I hope that helps:
http://codepen.io/lukeschunk/pen/pyPpQO

Custom jQuery/JavaScript Slider bugging out when I click on arrows/navigation

I'm working on creating my own responsive JavaScript/jQuery slider. It seems to be working pretty awesome for the most part, however, when I click on the arrows or navigation circles the timeout / animations seem to bug out. It is not consistent. When the arrows/nav circles are clicked, it should just reset the timeout and go to the corresponding slide.
For example if you click on a nav circle when it gets to the last slide it quickly goes right back to the first slide without the 5000 pause.
Here is the fiddle with all the code: http://jsfiddle.net/23712cwb/2/
Why is the timing bugging out like that? How do I fix it? As you can see I added clearTimeout($timeout); to the top of the nextSlide() function, but that didn't totally resolve it and I'm unsure this is the correct approach to the problem. However, before I added this line of code it was even more buggy.
Also if anyone has any tips they can give me or suggestions on how to make this even better that would be awesome. I am not very familiar with jQuery plugins so I am just kind of winging it here.
I figured it out. This code was causing the issue:
$('.slider .slides li .caption, .slider .slide-arrows li, .slider .slide-nav').mouseout(function () {
$timeout = setTimeout(function () { nextSlide('right', $slides, $height, $caption_speed, $slide_speed, 'null'); }, $slide_speed);
});
So every time I took my mouse off of the arrows or nav or caption it was doubling up on executing the nextSlide function.
I removed that code and it's all gravy now.
Actually, your code doesn't work on Firefox, because he is less forgiving than Chrome about errors.
You should define the functions captionActive and nextSlide you use outside of $(document).ready block
With your example it gave me this error on the console :
captionActive is not defined
Working fiddle
Edit : I guess you should be careful with the scope of $timeout : as you use it in the block document.ready and in functions, you should make use of global variables and work with window.$timeout instead of $timeout
That might solve some of your problems.

Fade-in pictures on page load with jQuery

I'm currently using this jQuery snippet to produce the effect of picture fading-in one-by-one when the page is loading:
jQuery(document).ready(function($) {
animatePictures('img');
});
function animatePictures(selection) {
elementsToAnimate = jQuery(selection);
elementsToAnimate.hide().each(function(i) {
jQuery(this).delay(i * 500).fadeIn(5000);
});
}
This roughly does the trick, but as you can see, the assets are first loaded, then they are hidden when the DOM is ready and then faded-in in 500ms intervals.
I was wondering if you could tell me how I can make it properly so that pictures really fade-in as the site is loading, and are not first hidden and then faded-in.
I will appreciate all suggestions. Thanks!
First in your css set all your pics to be display:none
img{display: none;}
Then use:
function animatePictures() {
jQuery('img').each(function(i) {
jQuery(this).delay(i * 500).fadeIn(5000);
});
}
jQuery(window).load(function($) { animatePictures(); });
by using the window load all your pictures will be loaded in memory and can be shown separately than the rate of download... You might think of using a lazy loader script instead if you are trying to optimize your page...
Pretty simple solution is to use just css:
img{/*select the selector*/
display: none;
}

How can I ensure this CSS transition animates

I have an image carousel built using knockout & jquery.
To animate the slides I really want to use CSS transitions and NOT jquery animate.
I have this nearly working but I have an issue.
In the code below, the 'slideRight' part doesn't work, however the else part works fine. What's happening is the transition to margin-left 0 is being skipped, even though the transition class has been added.
if (slideRight) {
$(requestedElement).insertBefore(currentElement);
slideContainer.css('margin-left', -$(self.carousel).width());
slideContainer.addClass('transition');
slideContainer.css('margin-left', 0);
} else {
$(requestedElement).insertAfter(currentElement);
slideContainer.addClass('transition');
slideContainer.css('margin-left', -$(self.carousel).width());
}
I've created a JSFiddle here: http://jsfiddle.net/vnw57nx0/2/
As you'll see in the fiddle, the carousel transitions nicely between slides going right to left.
But if you find this line in the javascript:
self.setIndex(self.currentIndex() + 1);
and change it to:
self.setIndex(self.currentIndex() - 1);
the slides should cycle in reverse.
They do, but they're not being animated.
Interestingly, if I debug the script and step through it works fine.
This made me think it was a timing issue and maybe I need to use a callback function but jquery .insertBefore, .css and .addClass are all synchronous.
Any ideas how I can fix this code that works if I debug but doesn't if I don't?
It seems that the browser doesn't make a transition when you revert a style value within the same context. You need to do it in a new context using something like setTimeout:
if (slideRight) {
$(requestedElement).insertBefore(currentElement);
slideContainer.css('margin-left', -$(self.carousel).width());
setTimeout(function() {
slideContainer.addClass('transition');
slideContainer.css('margin-left', 0);
});
} else {
http://jsfiddle.net/vnw57nx0/3/
I found this question because of the Knockout tag, and although you've got Knockout references in your question, the problem has nothing to do with Knockout. In fact, your code is very anti-Knockout since you're using jQuery selectors within your "view model" and using observables where none are needed or even useful.

jQuery animate problems

I use the following snippet to make an element's background lightblue, then slowly fade to whiite over 30 seconds:
$("#" + post.Id).css("background-color", "lightblue")
.animate({ backgroundColor: "white" }, 30000);
Two questions.
First, instead of fading to white, is there a way to fade opacity to 100%? That way I don't have to change "white" if I choose to change the page's background color?
Second, about once out of every 10 or 15 times, the background stays lightblue and fails to fade to white. I'm using the latest versions of jQuery and the UI core. What could be going wrong?
EDIT: Bounty is for a solution to problem regarding second question.
EDIT2:
Apparently I got downvoted into oblivion because I said I rolled my own solution but didn't show it. My bad. I didn't want to be self-promoting. My code works 100% of the time and doesn't require jQuery. A demonstration and the code can be found at:
http://prettycode.org/2009/07/30/fade-background-color-in-javascript/
For your second question: in my experience this is usually because a Javascript error has occurred somewhere else on the page. Once there is one Javascript exception, the rest of the page stops running Javascript. Try installing Firebug (if you haven't already), then open up the "Console" tab and enable it. Then any javascript errors or exceptions will be printed to the console.
Another thing to try (which kinda contradicts my last statement...) is to disable all your browser plug-ins to see if you can recreate. Sometimes they interfere with scripts on the page (particularly GreaseMonkey.)
If you could provide a sample HTML snippet which reproduces this animation problem it would be a lot easier for us to help you. In the script I have pasted below, I can click it all day, as fast or slow as I like, and it never fails to animate for me.
For the first question: I know you said you'd found a workaround, but the following works for me (even on IE6) so I thought I'd post it, since it may be different from what you were thinking. (Note that setting CSS "opacity" property through jQuery.css() works on IE, whereas IE does not support the "opacity" property directly in CSS.)
<html>
<head>
<style>
body { background-color: #08f; }
#test { background-color: white; width: 100px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var myOpacity = 0.125;
$(function(){
$('#test').css('opacity', myOpacity);
$('a').click(function(){
myOpacity = 1.0 - myOpacity;
$('#test').animate({ opacity: myOpacity });
return false;
});
});
</script>
</head>
<body>
<p>Click me</p>
<div id="test">Test</div>
</body></html>
Dont forget the color plugin.
See here
When the color fails to animate to blue you could try to use the callback function to log a message to the console. You can then check that the event actually fired and completed. If it does then you could potentially use two animates. The first one to animate to a halfway house color then the use the callback to animate to white (so you get two bites of the cherry, if the outer fails but completes the callback has a second go)
It would be good if you could try to recreate the issue or give a url of the issue itself.
e.g
$("#" + post.Id).css("background-color", "lightblue")
.animate({ backgroundColor: "#C0D9D9" }, 15000, function(){
$(this).animate({ backgroundColor: "#ffffff" }, 15000)
});
You could always use something like this, avoiding the JQuery animate method entirely.
setTimeout(function() { UpdateBackgroundColor(); }, 10);
UpdateBackgroundColor() {
// Get the element.
// Check it's current background color.
// Move it one step closer to desired goal.
if (!done) {
setTimeout(UpdateBackgroundColor, 10);
}
}
Also, you may be able to remove the "white" coding by reading the background color from the appropriate item (which may involve walking up the tree).
It is possible to have jQuery change the Opacity CSS property of an item (as mentioned in another answer), but there's two reasons why that wouldn't work for your scenario. Firstly, making something "100% opaque" is fully visible. If the item didn't have any other modifications to its opacity, the default opacity is 100%, and there would be no change, so I'm guessing you meant fading to 0% opacity, which would be disappearing. This would get rid of the light blue background, but also the text on top of it, which I don't think was your intent.
A potentially easy fix for your situation is to change the color word "white" to "transparent" in your original code listing. The color plugin may not recognize that color word (haven't checked documentation on that yet), but setting the background color to "transparent" will let whatever color behind it (page background, if nothing else) shine through, and will self-update if you change your page background.
I'll answer your first question.
You can animate opacity like this:
.animate({opacity: 1.0}, 3000)
I think you can try using fadeOut/fadeIn too..
What about:
$("#" + post.Id).fadeIn( "slow" );
You could possibly have two divs that occupy the same space (using position: absolute; and position: relative; setting the z-index on one higher to make sure one is above and the other is below. the top one would have a transparent background and the one below would have a background color. then just fadeout the one below.
As for the second question:
If you think the default animation classes from JQuery are not properly working you could try Bernie's Better Animation Class. I have some good experiences with that library.
Animate only works for numbers. See the jquery docs. You can do opacity but you can't do background color. You can use the color plug in. Background-color uses strings like 'red', 'blue', '#493054' etc... which are not numbers.

Categories