I have two divs. One is currently 0% and the other 100%. With the click function, I transform them into 12% and 88%.
Works like charm, but I would like the "process" to be slow, and not instant. Like a small animation.
This is the code I have:
<script>
$(document).ready(function(){
$(".menu_logo").click(function(){
$(".right").css("width","88%");
$(".left").css("width","12%");
$(".menu_logo").css("display","none");
});
});
</script>
Use CSS transitions. Add the following properties to your .right and .left classes.
CSS
-webkit-transition: width 150ms linear;
o-transition: width 150ms linear;
transition: width 150ms linear;
To do this with jquery, you can use the following snip:
$("button").click(function() {$("div").animate({width:'350px'}, "slow")});
JSFiddle
Related
I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.
When the page loads, I have hidden a div using
#hidDiv{
visibility: hidden;
}
I use jQuery to make it visible.
$('#hidDiv').css('visibility', 'visible');
My question is how do I make it fade in gently instead of appearing quickly?
Note: It's important that visibility: hidden; should be maintained. E.g. can not use hide(); instead of visibility: hidden;
If you don't want to use JQuery,
html:
<div id="theElement" class="hide"></div>
css:
.hide {
opacity: 0;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
.show {
opacity: 1;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
*1s is the number of seconds to fade for. Make sure you change all of them.
You can then just change the class with javascript:
document.getElementById('theElement').className = 'show'; // Fade in
document.getElementById('theElement').className = 'hide'; // Fade out
More Reading:
Simple documentation from W3Schools
More thorough documentation from MDN
Compatibility info from caniuse.com
Use jQuery fadeIn()
$('div').fadeIn();
Otherwise, if visibility must be maintained, do
$('div').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 'slow');
$('div').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 'slow');
div{
width:100px;
height:100px;
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div></div>
See Want to use jquery fade in effects, but want to use visibility:hidden initially
As AmmarCSE has stated, if you are using jQuery you can use $("div").fadeIn(); for more control you can also set a timeframe using fadeIn's first argument. ie
$("div").fadeIn("slow");.
This first argument can be one of the built in time values of "fast" or "slow" etc or it can be a time in milliseconds ie
$("div").fadeIn(1000);
The function also has a callback in case you want to do something once the element has finished fading in. It can be used like so...
$("div").fadeIn("slow",function(){
console.log("finished fading in");
});
You can also use fadeOut() in the same manner to fade the div back out... $("div").fadeOut("slow");
The docs on fadeIn() can be found here -> http://api.jquery.com/fadein/
Another option would be to use jQuery's animate() function on the elements opacity. Ie.
$("div").animate({
opacity:0
},"slow");
This is useful if you also want to animate other properties of the element at the same time. ie.
$("div").animate({
opacity:0,
left:200
},"slow");
The docs for animate() can be found here -> http://api.jquery.com/animate/
Another option would to use css transitions like so...
div {
opacity:0;
transition:opacity 1s;
-webkit-transition:opacity 1s;
-moz-transition:opacity:1s;
}
div.fadeIn {
opacity:1;
}
And then use jquery to add or remove the fadeIn class to trigger the fading ie.
$("body").on("click",function(){
$("div").toggleClass("fadeIn");
});
This will fade the div in or out on click of the body.
More info on transitions here -> http://www.w3schools.com/css/css3_transitions.asp
You could also use css animations but I wont go into that here. Hope the extra info helps someone.
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 have a section on my website that when a user clicks I would like it to expand, I'm using the jQuery's toggleClass for this...
expandable: function(e) {
e.preventDefault();
$(this).closest('article').toggleClass('expanded', 1000);
}
This is working fine, only I'd like to somehow animate it. In chrome my article slowly grows to the new size, only in Firefox it 'instantly' resizes itself with no animation, is there a way to have this animate?
jQuery UI extends the jQuery native toggleClass to take a second optional parameter: duration
toggleClass( class, [duration] )
Docs + DEMO
.toggleClass() will not animate, you should go for slideToggle() or .animate() method.
You can simply use CSS transitions, see this fiddle
.on {
color:#fff;
transition:all 1s;
}
.off{
color:#000;
transition:all 1s;
}
I attempted to use the toggleClass method to hide an item on my site (using visibility:hidden as opposed to display:none) with a slight animation, but for some reason the animation would not work (possibly due to an older version of jQuery UI).
The class was removed and added correctly, but the duration I added did not seem to make any difference - the item was simply added or removed with no effect.
So to resolve this I used a second class in my toggle method and applied a CSS transition instead:
The CSS:
.hidden{
visibility:hidden;
opacity: 0;
-moz-transition: opacity 1s, visibility 1.3s;
-webkit-transition: opacity 1s, visibility 1.3s;
-o-transition: opacity 1s, visibility 1.3s;
transition: opacity 1s, visibility 1.3s;
}
.shown{
visibility:visible;
opacity: 1;
-moz-transition: opacity 1s, visibility 1.3s;
-webkit-transition: opacity 1s, visibility 1.3s;
-o-transition: opacity 1s, visibility 1.3s;
transition: opacity 1s, visibility 1.3s;
}
The JS:
function showOrHide() {
$('#element').toggleClass("hidden shown");
}
Thanks #tomas.satinsky for the awesome (and super simple) answer on this post.
You should look at the toggle function found on jQuery. This will allow you to specify an easing method to define how the toggle works.
slideToggle will only slide up and down, not left/right if that's what you are looking for.
If you need the class to be toggled as well you can deifine that in the toggle function with a:
$(this).closest('article').toggle('slow', function() {
$(this).toggleClass('expanded');
});
Should have checked, Once I included the jQuery UI Library it worked fine and was animating...