Can anyone help me intergrate an easing effect within my Accordion?
What I want is to mimic this effect (which can be set in your CSS) with JQuery:
-webkit-transition: max-height 500ms ease, padding 500ms ease;
transition: max-height 500ms ease, padding 500ms ease;
How can I accomplish this?
Made a JSFIDDLE of my problem.
PS. Having a smooth easing effect would also do the trick.
If I understand it correctly, you want to replicate what slideDown() and slideUp() of jQuery by doing them in pure CSS with the use of transition property.
Then try this solution out.
CSS:
h3 {
display: block;
background-color: pink;
color: #fff;
padding: 20px;
margin-bottom: 0px;
}
.accordion__content {
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
overflow: hidden;
padding: 0;
max-height: 0;
transition: max-height 300ms ease-in-out, padding 300ms ease-in-out;
}
.accordion__content--displayed {
max-height: 100px;
padding: 20px;
transition: all 300ms ease-in-out;
}
JavaScript:
$(function () {
$('.accordion h3').click(function () {
$(this).next('.accordion__content').toggleClass('accordion__content--displayed');
});
});
Hope this helps.
By default, jQuery's slideUp() provides 2 easing functions -
swing (default)
linear
There are many more easing functions available but as external plugins.
As of now, if you want a smooth easing effect, you can change the speed in milliseconds like this -
$(this).next(".accordion__content").slideToggle(500).siblings(".pane:visible").slideUp();
Check this link, jQuery UI provides many easing functions
Related
I want to create an expand/collapse animation that's powered only by classnames (javascript is used to toggle the classnames).
I'm giving one class max-height: 4em; overflow: hidden;
and the other max-height: 255em; (I also tried the value none, which didn't animate at all)
this to animate: transition: max-height 0.50s ease-in-out;
I used CSS transitions to switch between them, but the browser seems to be animating all those extra em's, so it creates a delay in the collapse effect.
Is there a way of doing it (in the same spirit - with css classnames) that doesn't have that side-effect (I can put a lower pixel count, but that obviously has drawbacks, since it might cut off legit text - that's the reason for the big value, so it doesn't cut off legit long text, only ridiculously long ones)
See the jsFiddle - http://jsfiddle.net/wCzHV/1/ (click on the text container)
Fix delay solution:
Put cubic-bezier(0, 1, 0, 1) transition function for element.
scss
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
&.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}
}
css
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}
.text.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}
This is an old question but I just worked out a way to do it and wanted to stick it somewhere so I know where to find it should I need it again :o)
So I needed an accordion with clickable "sectionHeading" divs that reveal/hide corresponding "sectionContent" divs. The section content divs have variable heights, which creates a problem as you can't animate height to 100%. I've seen other answers suggesting animating max-height instead but this means sometimes you get delays when the max-height you use is larger than the actual height.
The idea is to use jQuery on load to find and explicitly set the heights of the "sectionContent" divs. Then add a css class 'noHeight' to each a click handler to toggle it:
$(document).ready(function() {
$('.sectionContent').each(function() {
var h = $(this).height();
$(this).height(h).addClass('noHeight');
});
$('.sectionHeader').click(function() {
$(this).next('.sectionContent').toggleClass('noHeight');
});
});
For completeness, the relevant css classes:
.sectionContent {
overflow: hidden;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.noHeight {
height: 0px !important;
}
Now the height transitions work without any delays.
In case anyone is reading this, I have not found a solution and went with an expand-only effect (which was achieved by moving the transition style to the expanded class definition)
Use display:flex. This will work:
.parent > div {
display: flex;
flex-direction: column;
height: 0px;
max-height: 0px;
opacity: 0;
overflow: hidden;
transition: all 0.3s;
}
.parent > div.active {
opacity: 1;
height: 100%;
max-height: none; /* important for animation */
}
The solution is actually quite simple. Make a child div, that has the content. The parent div will be the one that expands collapses.
On load the parent div will have a max-height. when toggling, you can check the child height by writing document.querySelector('.expand-collapse-inner').clientHeight; and set the maxheight with javascript.
In your CSS, you will have this
.parent {
transition: max-height 250ms;
}
You can accomplish this just fine using jQuery Transit:
$(function () {
$(".paragraph").click(function () {
var expanded = $(this).is(".expanded");
if (expanded)
{
$(this).transition({ 'max-height': '4em', overflow: 'hidden' }, 500, 'in', function () {$(this).removeClass("expanded"); });
}
else
{
$(this).transition({ 'max-height': $(this).get(0).scrollHeight, overflow: ''}, 500, 'out', function () { $(this).addClass("expanded"); });
}
});
});
You can definitely tidy it up a bit to your liking, but that should do what you want.
JS Fiddle Demo
This JQuery animation looks very choppy, can I fix it? If not, how can I use CSS to do it? Maybe I use JQuery to edit the CSS?
<h1>Test</h1>
<button onclick="anim()">Start Animation</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
function anim() {
$("h1").animate({fontSize: '50px'});
}
h1 {
font-size: 30px;
}
This is the example code
Here's the project (you can also go to j0rdan.me)
With CSS3 you can use transitions to animate the font-size:
h1 {
font-size: 30px;
transition: font 1s ease;
}
h1.bigger {
font-size:50px;
}
fiddle: https://jsfiddle.net/z6ztfgcg/3/
But to me it's not looking choppy with javascript from your example.
if you want to use only CSS then try this
h1 {
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}
h1:hover {
-webkit-transform: scale(1.5); /* Safari and Chrome */
-moz-transform: scale(1.5); /* Firefox */
-ms-transform: scale(1.5); /* IE 9 */
-o-transform: scale(1.5); /* Opera */
transform: scale(1.5);
}
There are a few reasons why the animation is "choppy"
Animating structural properties such as font-size are generally choppy
Because the structure is changing, elements around the animated element will also be affected
jQuery animations aren't as smooth as css animations
I recommend animating with css not jQuery by using transform: scale(1.5) as this will not affect surrounding elements and gives a smoother animation.
h1 {
font-size: 30px;
transition: all 0.4s ease;
}
h1.larger {
transform: scale(1.5);
}
If this is not possible and you want to animate the font-size I recommend setting the line-height to the size of the end animation size and having a fixed margin. This will hopefully prevent the surrounding elements from being affected.
h1 {
font-size: 30px;
transition: all 0.4s ease;
line-height: 50px; // Matches end animation size
margin: 20px 0;
}
h1.larger {
font-size: 50px;
}
Working examples of both solutions:
https://jsfiddle.net/z6ztfgcg/4/
Animating font-size will always be choppy because the transformation will skip keyframes. Best way would be to use CSS3 transition but with scale. This will ensure a smooth animation as you pretend.
<button onclick="anim()">Start Animation</button>
<h1 class="title">Test</h1>
<style>
.title {
position: absolute;
transform: scale(1);
transform-origin: 0 0;
-moz-transform-origin: 0 0;
transition: all 5s;
font-size: 30px;
}
.title.animate {
transform: scale(2);
}
</style>
<script>
function anim() {
$('h1').addClass('animate');
}
</script>
You can then decide how many seconds you want the transition to be and change the scaling factor. (in this case I put 5 seconds and 2 times the original size)
You can use css to add simple animations to your html:
.animClass {
transition: 1000;
font-size: 50px;
}
(Transition specifies the duration of animation in milliseconds)
Then just add the animClass when you need the animation to occur:
function anim(){
document.getElementsByTagName("h1").classList.add("animClass");
}
Or in jQuery:
function anim(){
$("h1").addClass("animClass");
}
I'm currently using my phone, so I wasn't able to check whether it works properly. Please inform me if further problems occur.
It does not seem that choppy on my end as well. You can try adding transform: translateZ(0); to the h1 CSS class: https://jsfiddle.net/z6ztfgcg/3/
This trick triggers GPU acceleration in modern desktop and mobile browsers, which should really smooth things out. There are plenty of other methods which accomplish similar tasks found here.
I'm having a small issue with my code. I have an element that when the page scrolls it will appear. However, I cannot get it to "appear" in a smoother way. I have tried CSS transitions and attempted fadeIn but neither work. It always just "jumps" in, I cannot get it to ease in.
Here is the code:
$(window).on("scroll", function () {
$('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});
So it appears just fine, but I can't figure out how to animate adding the class name.
This is the CSS btw:
.navbar {
visibility: hidden;
}
.navbar.visible {
visibility: visible;
}
visibility can't be animated with CSS transitions.
But you can do :
.navbar {
opacity: 0;
transition: opacity .5s ease; // Feel free to use prefixes.
}
.navbar.visible {
opacity: 1;
}
CSS transition / animations is surely the best way to animate something in 2014. You should avoid fadeToggle() and others jQuery animation methods.
instead of using toggleClass, use fadeToggle. it will do everything for u as far as CSS..
give it a try, just fadeToggle();
Here is the example of your code with correct css transition. You cannot animate visibility, but you can play with position and opacity.
http://jsfiddle.net/xZ6fm/
.navbar {
position: fixed;
top: -100px;
left: 0; right: 0;
padding: 12px;
opacity: 0;
background: #ccc;
}
.navbar.visible {
top: 0;
opacity: 1;
-webkit-transition: top 0.3s linear, opacity 0.7s linear;
-moz-transition: top 0.3s linear, opacity 0.7s linear;
transition: top 0.3s linear, opacity 0.7s linear;
}
As indicated in the other answer, fadeToggle() will get the work done for you. And frankly, it's probably the easiest way to accomplish such an effect.
CSS transitions require the transition property. Place this block of code in each of your CSS declarations:
transition: visibility .25s linear;
-webkit-transition: visibility .25s linear;
-moz-transition: visibility .25s linear;
-o-transition: visibility .25s linear;
If you have difficulties with visibility, try using opacity instead.
So I have created a little box with some CSS animation:
.boxtest
{
width: 50px;
height: 50px;
background-color: green;
opacity: .2;
transition: opacity .8s, width .8s ease-out;
-moz-transition: opacity .8s, width .8s ease-out;
-webkit-transition: opacity .8s, width .8s ease-out;
-o-transition: opacity .8s, width.8s ease-out;
}
.boxtest:hover {
opacity: 1;
width: 70%;
}
What I'd like is for the CSS hover class to remain permanent after the user has hovered their mouse over the element.
I guess you'd need to use Javascript, but I'm no expert so can't figure out the right command. Any help would be awesome!
http://jsfiddle.net/r75gC/
Here you go!
Basically I used jQuery to add a class to the div. You can choose one of the two below.
//onClick
$(".boxtest").on("click", function () {
$(".boxtest").addClass('permahover');
});
//onHover
$(".boxtest").on("mouseenter", function () {
$(".boxtest").addClass('permahover');
});
I changed the CSS to:
.boxtest:hover,
.permahover {
opacity: 1;
width: 70%;
}
http://jsfiddle.net/rFRc5/2/
If you haven't a lot of experience with javascript I would recommend using JQuery. Use this to include the JQuery libraries in your website:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
this will allow you to simply do (in your html file):
<script>
$(".boxtest").mouseenter(function() { $(".boxtest").addClass("boxtestHover"); });
</script>
also for the above change .boxtest:hover to boxtesthover (or whatever you want)
jQuery is a bit overkill for this.
Instead of hover, use another class name, then just add this to the element
onmouseover="this.className='newClassName'"
I'm trying to make a portfolio for me. I wish to have a fading in-out effect while I roll over the navigational links (which is pure text). Is there any way to get the fading effect using css ? Or what should I do for that ? Please help me :)
Couple of ways to do this.
CSS3:
Using -webkit-transition.
#fademe {
opacity: 0.5;
-webkit-transition: opacity 1s;
}
#fademe:hover {
opacity: 1;
-webkit-transition: opacity 1s;
}
jQuery (Javascript):
jQuery's hover and fadeTo methods.
$("#fademe").hover(function(){
$(this).fadeTo(1);
}, function(){
$(this).fadeTo(0.5);
});
check out CSS transitions - MDC Doc Center
or Different Transitions for Hover On / Hover Off | CSS-Tricks
from css-tricks:
#thing {
padding: 10px;
border-radius: 5px;
/* HOVER OFF */
-webkit-transition: padding 2s;
}
#thing:hover {
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
}
You can use the jquery fadein and fadeout to do it.