I am using bootstrap framework on my website, with the content wrapped in class="container"
This has certain break-points when the screen resizes, the cols, margins, etc change.
I wanted to put a delay on that break point but not sure how to go about it. So when the side margins change from one size to another, the content doesn't just jump to the new size, but animates into it.
Here you have an example of the CSS that you can use:
-webkit-transition:width 1000ms ease-in-out;
-moz-transition:width 1000ms ease-in-out;
-o-transition:width 1000ms ease-in-out;
transition:width 1000ms ease-in-out;
Basically what it does, is that when the property "width" changes specifies a transition effect with a slow start and end of 1 second.
JSFiddle with an example. You have to move your mouse hover the red DIV to see the effect.
More information about this CSS property.
Try adding something similar to the following CSS to your container element:
transition: all 0.5s ease-in-out;
Related
div.style.marginLeft="-200px";
On click of a button above statement executes but it just changes the margin instantly, but I want that it moves while changing the margin.
So I need a JavaScript solution for that.
Actually you can probably solve this with CSS. If you have the margins changing already, try applying a CSS transition to the element.
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
In this case the "all" is a reference to the property you want to apply the transition to. You could probably use margin-left, but all will cover pretty much all available transition properties.
Here's more info: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
I have several problems with transition behavior, probably they are the same single problem.
First class of problems with a short transitions.
<style>
.someclass {
transition: all 1s linear;
}
</style>
<script>
function activationcode()
{
//$('.someclass').hide(); was in display none state.
$('.someclass').css('opacity', 0);
$('.someclass').show();
$('.someclass').css('opacity', 1);
}
</script>
Add in most of cases this code doesn't work as expected. The .someclass item appears in final state. The changing property doesn't matter, opacity is just for example. To make it working the two things helps: a) changing all for transition to the particular property, for this example to opacity; b) call $('.someclass').css('opacity', 1); with delay, for example, 100ms.
But this only reduce probability of problem to very low value, doesn't fix it.
Second class of problem is for a long animation. It works, but if you put it inside the tab (or anything like that), and will start to switch from animated tab to other one, the animation may be finished in a final state before the specified time. Single switch/switch-back usually doesn't break animation. But two or more switches does with very high probability.
I can reproduce this on Firefox (not very recent). Initially was reported for Chrome (reporter states that he uses the last one version).
I suspect that the problem does depend on amount of css/js activity on page (was unable to reproduce second problem with minimal jsfiddle).
So the question is how to fix such problems, does any solution exist?
Place the line...
$('.someclass').css('opacity', 1);
...in a setTimeout(fn, 0). This will defer its execution, ensuring that the browser won't optimise those steps into one paint (show the element at 100% opacity).
I suggest that you use classes instead and handle show/hide in CSS only
.hide {
display: none;
opacity: 0;
transition: opacity 1s linear 0s, display 0s linear 1s;
/* decrease opacity, then change display with a delay */
}
.show {
display: block;
opacity: 1;
transition: display 0s linear 0s, opacity 1s linear 0s;
/* change display instantly without delay, then increase opacity */
}
By delaying the hiding for 1s, you allow the opacity transition to complete before hiding it.
But we reset the delay on the showing because we need people to see the opacity increasing.
I have the following HTML:
<div id="welcome-content">
// Code
</div>
<div id="configure-content" style="display:none">
// Code
</div>
And (working) jquery that toggles between them:
$('.back-welcome').click(function(){
$('#welcome-content').toggle();
$('#configure-content').toggle();
});
I want to use CSS3 to create a fade effect as I toggle between them. I have tried the following:
#welcome-content, #configure-content{
-webkit-transition: all 400ms;
-o-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-khtml-transition: all 400ms;
}
However, no animation takes place. What am I doing wrong?
The property display that assign the method toggle () can't be animated with the CSS transitions. Maybe you want to look at fadeIn() and fadeOut().
Edit
I've found this another method fadeToggle() i don't know much about it but you can search and use this:
$('.back-fade').click(function(){
$('#welcome-content').fadeToggle(2000);
$('#configure-content').fadeToggle(2000);
});
Check this demo http://jsfiddle.net/8urRp/14/ *
*I made the divs with absolute position to keep them on the same space
There can only be a transition for a CSS property from one value to another. For a fade transition, the opacity should go from 0 to one.
CSS
.foo {
opacity: 0;
transition: all 400ms;
}
.foo.active {
opacity: 1
}
JavaScript
$('.mybtn').click(function() { $('.foo').toggleClass('active'); })
See this fiddle
Now there is an annoying thing with showing an hiding elements using with CSS transitions. The transition from display: none to display: block is instant, canceling out all other transitions.
There are several ways around this. First you can just use the jQuery fadeOut function. If you do really insist in using CSS transitions have a look at this answer.
I'm stuck here.
How to I transform this:
-webkit-transition:all 0.66s ease-out;
-moz-transition:all 0.66s ease-out;
-ms-transition:all 0.66s ease-out;
-o-transition:all 0.66s ease-out;
transition:all 0.66s ease-out;
into jQuery animations?
I'm using this script, to make an "onload" animation using Packery/Masonry that all items ease from the upper left corner to their positions.
Unforunately this css3 transition is causing a shaking with the packery script when you resize the browser. A solution would be to use jquery animations.
Any ideas?
Unforunately this css3 transition is causing a shaking with the packery script when you resize the browser. A solution would be to use jquery animations.
Or remove the class that adds the transitions after the initial transitions took place.
try:
$('#element').animate({top : 200, left: 200}, 660);
make sure #element has position relative OR absolute.
hope that helps.
I'm trying to make a web page where the background color of an image gradually changes colors. I know how to change the background color of something in Javascript, but I don't know how to "animate" it so to speak (without using Flash).
You can use CSS transitions to get that effect. Just add that css code into the element that is changed from js:
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
With that on css each time any style value is being changed that change is animated from current to new value by 1s.
It works only on modern browsers. See an example: click
Here is an example on how to animate the body tag background :
function animateBg(i) {
document.body.style.backgroundColor = 'hsl(' + i + ', 100%, 50%)';
setTimeout(function() {
animateBg(++i)
}, i);
}
animateBg(0);
Keep in mind that hsl isn't crossbrowser, you can also do the trick with hex/rgb colors.
Jsfiddle link : http://jsfiddle.net/euthg/
You might want to use the setTimeout() function:
function animateBg()
{
myElement.style.backgroundColor = someNewValue;
setTimeout(animateBg, 20); // 20 milliseconds
}
and invoke animateBg() in your body's onload handler. E.g., <body onload="animateBg()">.
I would try using a JQuery color plugin. Look at the examples here (click on Demo), they seem to do exactly what you describe.