One quick question.If I set a div to display: none, the following Elements in the DOM will jump up on the place where the div was.How can I animate that jump, that it just moves gently up?Thnaks in advance for each help!
You cannot. Instead of display: none; make it with height: 0; and transition: height .5s; overflow: hidden;
Then you will have slightly move of other divs next to others. :)
If you wanna, I can made a simple codepen.
Use slideUp() instead of hide(); if you use jquery
$('.hidden').slideUp();
Just animate it. jQuery has many ways of doing it, e.g:
$('#myDiv').hide(200); // 200ms
To avoid to keep an hidden element with a width that could interfere with other elements on the page, you should simply:
$('yourElement').slideUp();
That way you will make the yourElement height animate and, finally, get it hidden actually removing it from the elements flow.
Edit:
Thanks A. Wolff for the comment. Removed un-needed .hide() function after .slideUp().
Got even a better solution for you. You can show and hide the blue box with every time you click on the pink box.
$('.pinkBox').click(function() {
$('.pinkBox').addClass('show');
$('.blueBox').addClass('displayed');
});
$('.blueBox').click(function() {
$('.pinkBox').removeClass('show');
setTimeout(function() {
$('.blueBox').removeClass('displayed');
}, 300);
});
.blueBox {
height: 100px;
width: 100px;
background-color: blue;
transition: all .3s ease;
position: absolute;
display: none;
}
.pinkBox {
height: 100px;
width: 100px;
background-color: pink;
transition: all .3s ease;
position: absolute;
}
.show {
transform: translateY(100px);
}
.displayed {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='blueBox'>
</div>
<div class='pinkBox'>
</div>
Related
I have a container as a header of a collapsible dropdown with a max-height of 30px. I'm toggling an ".open" class that changes the max-height to 30000px onClick in Javascript.
I'm trying to add a CSS transition to make this more fluid via transition: 1s; to the container class. The resulting effect is clunky and seems wrong: the div will collapse instantly (no ease-in/out) after a timeout equal to the 1s in the css element. I.e. if I add transition: 5s;, nothing will happen on the page until 5s, then the div will snap closed.
Hope this makes sense, thank you!
-- Sharing code for clarity:
html:
<section class="project">
<div class="project-head">
imgs/text with flexbox/grids etc
</div>
</section>
css:
section.project {
max-height: 30px;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
.project-head {
display: grid;
height: 50px;
width: 95vw;
transition: .01s;
}
.open {
max-height: 100000px !important;
}
js:
document.querySelectorAll('.project-head').forEach(project => {
project.addEventListener('click', function () {
this.parentElement.classList.toggle("open");
});
})
The code is doing what it has been asked to do - transitioning the max-height from something very big to something pretty small. It's only the last part of that that you will actually see and it looks instant because most of the transition time has been taken up with getting the huge max height down to the actual height of the div.
This snippet demonstrates a mitigation of the problem by putting the max-height to something that is not nearly so high. The outer div is set to have a different color on the smaller max height from the larger one so you can see what is happening:
document.querySelectorAll('.project-head').forEach(project => {
project.addEventListener('click', function() {
this.parentElement.classList.toggle("open");
});
})
section.project {
max-height: 30px;
overflow: hidden;
transition: all 5s ease-in-out;
background-color: rgba(255, 0, 0, 0.5);
}
.project-head {
display: grid;
height: 50px;
width: 95vw;
transition: .01s;
}
section.project.open {
max-height: 100px;
background-color: cyan;
}
<section class="project">
<div class="project-head">
imgs/text with flexbox/grids etc
</div>
</section>
Now try changing the max-height to something much larger and you will see it's transformation not being so noticable, because mostly it's off screen.
document.querySelectorAll('.project-head').forEach(project => {
project.addEventListener('click', function() {
this.parentElement.classList.toggle("open");
});
})
section.project {
max-height: 30px;
overflow: hidden;
transition: all 5s ease-in-out;
background-color: rgba(255, 0, 0, 0.5);
}
.project-head {
display: grid;
height: 50px;
width: 95vw;
transition: .01s;
}
section.project.open {
max-height: 10000px;
background-color: cyan;
}
<section class="project">
<div class="project-head">
imgs/text with flexbox/grids etc
</div>
</section>
The expansion seems to be much quicker, and the contraction much slower.
What to do in practice? As you rightly say you can't transition from/to auto so the max-height way is sort of a way round it. There seems to be no way other than choosing a sensible max height that is likely to be just more than the total height you want to expose. This is probably doable for an item in a menu as it will consist of a (very) few lines of text. However if you have lots of images this may be more difficult to judge. I suppose one way would be to get JS to calculate the heights at run time, but that then rather defeats the object of using the max height method.
I'd like to have it when I click an image that it centers in the viewport (like a lightbox effect).
I've set up a pen here http://codepen.io/emilychews/pen/OpXKGd and tried work out the best way to do this but I seem to have hit a wall.
I've included multiple elements in the demo because I'd like it so it uses the window as it's centering container, not just the parent element. I'll be using this on a wordpress site so saying just add a wrapper isn't viable for me.
Also if you look at the demo, at the moment the elements scale up smoothly and i'd like to have it align centrally in the window object as part of the transition when it scales up.
I appreciate this may only be possible with JS / jQuery and i have included some in my example.
My code for quick reference is:
HTML
<div class="wrapper">
<div class="holder image1">Image 1</div>
<div class="holder image2">Image 2</div>
<div class="holder image3">Image 3</div>
<div class="holder image4">Image 4</div>
<div class="holder image5">Image 5</div>
</div>
CSS:
.holder {
width: 20vw;
height: 400px;
background: red;
position: relative;
display: inline-block;
margin-bottom: 5px;
transition: all .75s ease-out;
}
// ======== THIS IS THE CLASS THAT IS ADDED WITH JQUERY
.fullsize {
background: blue;
z-index: 2;
position: relative;
transform: scale(1.75);
transform-origin: center center;
transition: all .75s ease-out;
}
jQuery:
$(document).ready (function(){
$('.holder').click(function() {
$( this ).toggleClass('fullsize');
$( this ).css('z-index', '+=1');
});
});
Any help / solution would be amazing.
Emily :)
I believe what you're looking for is to set a left property on the full size image. Note that you will also need to use position: absolute in order to offset each element by the same amount (centralising them).
.fullsize {
position: absolute;
left: 40vw;
}
I've created an updated CodePen showcasing this here.
Note that you also may want to give them a higher z-index, as the .fullsize elements are sometimes obscured behind the regular images.
Hope this helps! :)
Try this. It's a little jumpy and needs some fiddling, but it gives you what you want.
Change .holder to:
.holder {
width: 20vw;
height: 100px;
background: red;
position: static;
display: inline-block;
margin-bottom: 5px;
transition: all .75s ease-out;
z-index:0;
transform-origin: top left;
}
Change .fullsize to:
.holder.fullsize {
background: blue;
z-index: 200;
transform: scale(1.75);
transition: all .75s ease-out;
position:absolute;
}
and change your JQuery to
$(document).ready (function(){
$('.holder').click(function() {
var $scaleFactor = 1.75;
$( this ).toggleClass('fullsize');
var $winWidth = $(window).width();
var $myWidth = $(this).width();
var $newWidth = $myWidth*$scaleFactor;
var $left = $winWidth/2-$newWidth/2;
$(".holder").text($left);
$(this).animate({
left:$left+"px"
},200);
});
});
Setting the scaling in the JQuery instead might give you a smoother transition.
I have a trouble with an effect I want to achieve.
When I put the mouse over this element :
<div class="process">
<h3 class="text-center">Process</h3>
<ul class="row text-center list-inline wowload bounceInUp animated" style="visibility: visible; animation-name: bounceInUp;">
<li data-id="Reflexion">
<span><i class="fa fa-flask"></i><b>Reflexion</b></span>
</li>
</ul>
</div>
I want to have an overlay over all the page and over this overlay my <ul>...</ul>
I have tried with z-index and position but it doesn't work, my overlay is always over all the page and over the <ul>...</ul>
Here is the style of <ul></ul> and .overlay
.process ul li{
width: 10em;
height: 10em;
border: 1px solid #CEEBF0;
padding: 0;
border-radius: 50%;
margin: 0 1.25em;
line-height: 13.5em;
color: #21ABCA;
-webkit-transition: border-color 0.5s ease-in; /* Safari */
-moz-transition: border-color 0.5s ease-in; /* Firefox */
transition: border-color 0.5s ease-in;
}
.process ul li span{line-height: 2em;display: inline-block;font-weight: 300;}
.process ul li span i{font-size: 3em;}
.process ul li span b{display: block;font-size: 1em;font-weight: 300;}
.process ul li:hover {
border-color:#3498db;
background-color: rgba(52, 152, 219,1.0);
}
.overlay {
position: fixed;
z-index: 50;
background-color: red;
height: 100vh;
width: 100vw;
}
Here is the script I'm using to listen mouse event :
$(".process ul li").on({
mouseenter : function() {
$('#overlay').addClass('overlay');
},
mouseleave : function() {
$('#overlay').removeClass('overlay');
},
});
Update
There is a Fiddle that show better than words my trouble
When I make overlays I usually use absolute positioning to get it right. Without knowing what effect you want specifically, here's a generic demo of how an overlay might work.
fiddle
By setting the overlay's position to absolute, and all of its positional attributes to 0, it covers the box it's bound to completely without having to worry about setting widths or heights.
Hope this helps!
EDIT
I know you've solved the issue, but for those who may look later, here's a link to a fiddle wherein the issue has been solved.
fiddle
The Z-index property only works when both elements are positioned manually. Make sure the list has position: relative or position: absolute too, not just the overlay. Then you need to give a higer value to the z-index of the list.
EDIT: try adding this to your code:
.process {
position: relative;
z-index: 100;
}
You'll have to actually play with Z-index to make sure only the hovered panel is in front of the overlay if that's what you want, but this proves that you need to set a position attribute on what you want to be manually z-positioned.
Iam positioning my div at the center of the page using below css code :
.content{
width:1000px;
height:600px;
margin:auto;
margin-top:auto;
}
My Requirement :
I would like to implement the above in $(document).ready(function () {} using JQuery. Initially i will assign the div negative position and hide it. Then in document.ready i want to show it and animate the div assigning the above properties.
I tried to implement the same. I am able to assign width and height but margin:auto and margin-top:auto; is not working.
It will be very helpful if somebody can guide me..!!
This is what i am doing:
http://jsfiddle.net/rgd9mwjz/
I need to see the animation of div moving from -5550px to center of div. How to achieve this?
You don't need jQuery to center the item, I've used it to add a class on the div in my example, making it come from left to right :
$(function() {
$("div").addClass("shown");
});
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
}
div
{
top: 50%;
left: -50%;
background: darkred;
width: 100px;
height: 100px;
position: relative;
transform: translate(-50%, -50%);
-moz-transition: .5s ease;
-webkit-transition: .5s ease;
}
div.shown
{
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I've found a interesting reply on this post Using jQuery to center a DIV on the screen
Hope it helps you!
Check this DEMO:
http://jsfiddle.net/60c977nf/
$(document).ready(function()
{
$('.content').css('display','block');
$('.content').addClass('other_properties');
});
I have added a new class to the div .content on document ready state and specified the new styles in the css files. That would make it easier for you to write new styles using the css file itself.
If you want to add styles using jQuery itself then use .css() property itself.
Could someone have a look at my code. what it's suppose to do is animate the img tags using fadeIn and fadeOut but it only fades out the first img and doesn't fade in the second img. I think my css could be wrong and that's why the second image isn't showing Im not getting any errors
its an image on top of another image
jQuery
$(document).ready(function() {
$('.social-media a').on('mouseenter', function(e) {
$(this).find("img:nth-child(2)").fadeIn();
$(this).find("img:nth-child(1)").fadeOut()
});
})
HTML
<div class="social-media">
<a title="Share On Twitter" href="#">
<img alt="" src="images/icon_twitter.png" />
<img class="test" alt="" src="images/icon_twitter_active.png" />
</a>
</div>
CSS
.social-media {
padding-top: 20px;
width: 166px;
margin: 0 auto 10px auto;
}
.social-media a {
position: relative;
width: 55px;
height: 51px;
}
.social-media a img:nth-child(1) {
opacity: 1;
}
.social-media a img:nth-child(2) {
position: absolute;
left: 0; top: -33px;
opacity: 0;
z-index: 2;
}
Instead of hiding the second <img> element with zero opacity, you should use display: none instead:
.social-media a img:nth-child(2) {
position: absolute;
left: 0; top: -33px;
display: none;
z-index: 2;
}
http://jsfiddle.net/8vH4E/
However, I would strongly recommend using a simple CSS image sprite to achieve this effect, which doesn't require JS.
Update: Since OP asked if it is possible to do with CSS, I have modified the Fiddle to exclude the use of JS and simply rely on the use of CSS and pseudo-elements: http://jsfiddle.net/8vH4E/2/
.social-media a {
display: block;
position: relative;
width: 100px;
height: 100px;
background-image: url(http://placehold.it/200x200);
background-size: cover;
}
.social-media a::before {
background-image: url(http://placehold.it/200x200/4a7298/eeeeee);
background-size: cover;
content: '';
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.social-media a:hover::before {
opacity: 1;
}
My strategy is rather simple:
Use background images instead. For sizing, I have used cover but you are free to use any sizing (absolute pixel/point sizes, relative percentage sizes or dynamically-computed sizes like cover, contain)
For the hover state, use an absolutely-positioned pseudo element that covers the entire <a> (by positioning it absolutely and with zero offset from all four directions). We don't need pointer events on the pseudo element, so we set it to pointer-events: none
When the <a> element is hovered on (targeted with the :hover selector), we toggle the opacity of the pseudo-element from 0 to 1. We declare the transition property on the pseudo-element to allow for smooth, browser-computed and JS-agnostic transition.
the sprite is good but does not give smooth fading animation (think that was the main reason, KDM, wasn't it?).
So let's fix existing code:
as the fadeOut() turns the element to the display: none; state, as the fadeIn() starts working when the element is display: none;. So let's turn the 2nd image in display: none; first;
We can omit the opacity at all for both images (relying on 1.0 as default); $.fadeIn/Out() use the opacity from the CSS as the start/end point of the animation. Of course you can set the opacity explicitly for each image if it's designed in such way;
display: inlibe-block; for the <a> is a good point because it contains inline elements which possibly can disappear (display: none;); that causes the the whole <a> disappearing and the mouseleave event firing with unexpected UI bugs.
Enjoy http://jsfiddle.net/8vH4E/1/ and thanks to Terry for the fiddle :)