jQuery animation after removing elements - javascript

I have the following HTML and CSS:
<div id="categories">
<h3 id="sports">Sports</h3>
<h3 id="videogames">Video Games</h3>
<h3 id="music">Music</h3>
<h3 id="web">Web</h3>
</div>
#categories {
left: 50%;
top: 50%;
position: absolute;
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
#categories > h3 {
display: inline;
}
The h3 elements are displaying inline and centered. I have the following code in jQuery that when you click an h3 element, the other elements fade out. It works well to remove the elements, but once they disappear, the selected element just suddenly flashes into the center (which is where I want it) but is there a way to animate this? Make it a smoother transition?
$("#categories h3").click(function(){
if(this.id == "sports"){
$("#videogames").fadeOut(500);
$("#music").fadeOut(500);
$("#web").fadeOut(500);
}
})

Use transition, much better.
$("#categories h3").click(function(){
if(this.id == "sports"){
$("#videogames, #music, #web").css({opacity: 0});
}
});
#categories {
left: 50%;
top: 50%;
position: absolute;
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
#categories > h3 {
display: inline;
transition: opacity .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="categories">
<h3 id="sports">Sports</h3>
<h3 id="videogames">Video Games</h3>
<h3 id="music">Music</h3>
<h3 id="web">Web</h3>
</div>

May be you can use this. correct me if i am wrongly understood.
if(this.id == "sports"){
$("#videogames").fadeOut(500);
$("#music").fadeOut(500);
$("#web").fadeOut(500);
$("#sports").fadeOut(500);
$("#sports").fadeIn(500);
}

To answer your question about smoothly transitioning the selected element to the center try the below code.
Your fundamental problem is that "The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page." And so the remaining selected element jumps to the center. And you cannot transition to display: none. So you need to find a property you can animate, like "left" which I have used here.
[As an aside there is some extra code there because I was testing the ability to animate flex "order" but it doesn't work at this time on Edge, and untested on other browsers. You do not need the order properties.]
Hope this helps.
$("#categories h3").click( function() {
var thisID = this.id;
$.each( $("#categories h3"), function (index, val) {
if (thisID == val.id) {
var containerWidth = $("#categories").width();
var thisWidth = val.getBoundingClientRect().width;
var thisComputedLeft = val.getBoundingClientRect().left;
var adjustLeft = (containerWidth / 2) - thisComputedLeft - (thisWidth / 2);
// to center the clicked element
$(this).css({ left: adjustLeft });
}
else $(val).css({opacity: 0});
});
});
#categories {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
justify-content: space-around;
align-content: center;
width: 100%;
height: 100%;
//margin: 0 auto;
}
#categories > h3 {
cursor: pointer;
position: relative;
left: 0;
width: auto;
transition: all 0.5s ease, opacity 0.3s;
// transition: opacity 0.3s;
}
#sports { order: 1; }
#videogames { order: 2; }
#music { order: 3; }
#web { order: 4; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="categories">
<h3 id="sports">Sports</h3>
<h3 id="videogames">Video Games</h3>
<h3 id="music">Music</h3>
<h3 id="web">Web</h3>
</div>

Try the following:
$("#categories h3").on('click', function(){
if(this.id == "sports"){
$("#videogames").fadeOut(500, function(){
$("#music").fadeOut(400, function(){
$("#web").fadeOut(300, function(){
$("#sports").fadeIn(400);
});
});
});
}
});
The callback function is called once the first animation is complete. You can nest the functions for a sequence animation.
Update:
Here are better examples for chaining animations: Chaining jQuery animations that affect different elements

Related

Angular 14 Class binding transition is not triggering

I'm using class binding on an element which then should have its scaleY() change from 1 to 0. When I tried the transition with a :hover selector it worked perfectly but when I actually try it with class binding it just pops off without the desired transition.
I looked online and most of the already answered question were about the CSS that was incorrect such as this example (angular ng-class appending classes does not trigger css3 transition).
Here's the code :
filledPortionis an array containing 10 booleans if they're set to true then it adds the filled class, which it does ! I'm gonna repeat myself but Angular does add/remove the class as it should my only problem is that it skips my transition (which is working when I tried using it with an :hover selector)
component.html
<div class="bar" [class.end]="typeEnd">
<span *ngFor="let portion of filledPortion; let i = index" class="portion" [class.filled]="portion"></span>
</div>
component.scss
.bar {
.portion {
position: relative;
width: 2rem;
height: 1.5rem;
clip-path: polygon(100% 0, 0 0, 50% 100%);
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: bottom;
transform: scaleY(0);
background-color: var(--red);
transition: transform .250s cubic-bezier(0.4, 0.0, 0.2, 1);
z-index: 1;
}
&.filled::before {
transform: scaleY(1);
}
}
}
.end {
.portion {
&::before , &::after {
background-color: #fff;
}
}
}

cross fade-in/fade-out images at one position with other images left to it?

I have a fiddle in which there are 4 tiles placed horizontally with some space in between.
Here is the CSS which I have used in order to place them horizontally.
.featured-block {
position: relative;
display: flex;
justify-content: space-between;
}
Problem Statement:
What I want to achieve for the 3rd/4th tile(image) in the fiddle is I want cross-fade (fade-in/fade-out) happen with them(3rd/4th image) at the 3rd position from the left.
I believe I need to add the following css codes with some modification in order to make that happen but I am not sure what
modification I need to make.
.featured-block__item {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 800ms ease; /* immediately start fading out when active class is lost */
}
.featured-block__item.featured-block__item-active {
opacity: 1;
}
you can use following css code
.featured-block {
position: relative;
display: flex;
width:100%;
overflow:hidden;
justify-content: space-between;
}
.featured-block__item:nth-last-child(2),
.featured-block__item:last-child{
opacity: 0;
transition: opacity 800ms ease; /* immediately start fading out when active class is lost */
}
img{
width:calc(100% / 3);
}
.featured-block__item:last-child{
position: absolute;
top: 0px;
right: 0px;
bottom:0px;
}
.featured-block__item:nth-last-child(2).featured-block__item-active,
.featured-block__item:last-child.featured-block__item-active {
opacity: 1;
}

position fixed not working on sticky menu

I added this class ".sticky" by javascript to the nav but sticky menu not working correctly.
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
-webkit-transform: none;
transform: none;
}
javascript code
//sticky menu
var stickyNavTop = $('.main-navbar').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.main-navbar').addClass('sticky');
} else {
$('.main-navbar').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
can you please check the page
http://www.chainreaction.ae/alayam/
thank you
Add this css:
.scotch-panel-canvas {
transform: none !important;
-ms-transform: none !important;
-moz-transform: none !important;
-webkit-transform: none !important;
}
Please remove inline styles from the scotch-panel-canvas div then it works fine...
remove this style: style="position: relative; height: 100%; width: 100%; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden; transition: all 300ms ease;"
i don't how this inline css coming from but you should remove this. I think this style coming from some jquery. When u remove this code it works fine...
and also increase the z-index value
Using position: fixed; and top: 0px; should be enough.
Please see this link http://jsfiddle.net/luckmattos/yp8HK/1/

transition animation to text align: center

I'm using the below; but the margin isn't nearly as approximate as text-align:center; is there anyway I could toggle text-align: center; to occur with a animation transition until it gets to the point of text-align: center; similar to that which is achieved with the below.
if ($(".resource-section").hasClass("resource-section--expanded")) {
$(".resources__header h2").animate({"marginLeft": "40%"}, "slow");
}
You can use a centering technique that allows you to horizontally center any element.
It can be animated using only CSS
.test {
position: absolute;
transform: translateX(0%);
left: 0%;
animation: center 2s infinite;
}
#keyframes center {
0%, 10% {
transform: translateX(0%);
left: 0%;
}
90%, 100% {
transform: translateX(-50%);
left: 50%;
}
}
<h1 class="test">TEST</h1>
You could animate center align using margin-left like this
var h1 = $('h1').width();
var parent = $('.container').width();
$('h1').animate({'margin-left':(parent/2-h1/2)}, 1500);
.container {
border: 1px solid black;
height: 100px;
}
h1 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Text</h1>
</div>
From what i understood if you want to use the text-align:center property something like this could be of help to you, but the text-align property can't be animated
$(function(){
$('.resources_header h2').click(function(){
$(this).toggleClass('align-center');
});
});
.align-center{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="resources_header">
<h2>HEADER</h2>
</div>
</div>
A problem with this is the animation so if what you want to achieve is to animate from left to center then why not:
$(function(){
$('.resources_header h2').click(function(){
var windowHalfWidth = $(window).width()/2;
$(this).css('position','absolute');
var elemHalfWidth = $(this).width()/2;
var left = windowHalfWidth - elemHalfWidth;
$(this).animate({
marginLeft: left
},"slow",function(){
$(this).css('position','static');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="resources_header">
<h2>HEADER</h2>
</div>
</div>

Making a pop up modal using dynamically created buttons / divs

I'm currently building a sort of image selection and would like to make it so when clicking the magnifying glass icon on the images it pops up a modal showing the whole picture, title and description. I have one problem though, all of my info is being pulled in from Google Sheets using Sheetrock.js and has a template with Handlebars.js.
// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1it6QkBRPDsIqYOtr_UbFFmHBEADVkKaKjdghLSX5d3E/edit#gid=0';
// Compile Handlebars template for team RBI leaders.
var RBITemplate = Handlebars.compile($('#team-rbi-template').html());
// Load top five team RBI leaders.
$('#image-grid').sheetrock({
url: mySpreadsheet,
rowHandler: RBITemplate
});
I've had my concept sort of working, except when I call {{cells.ImageURL}} it likes to only show the first image(cell) in the pop up. Which doesn't make sense since it just shows all the queries on the load up of the page in the #image-grid container. I want the modal to have an x button in the top right, as well as, clicking on the fullscreen modal will close it.
Here is what I have built to make the modal:
HTML
<div class="modal">
<div class="overlay"></div>
<div class="modal__contents modal--transition">
<a class="modal__close" href="#">X</a>
<img src="{{cells.ImageURL}}">
</div>
</div>
Javascript (jQuery)
$(document).on('click', "a.btn", function() {
$('.modal').toggleClass('modal--show');
});
$(document).on('click', '.overlay', function() {
$('.modal').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function() {
$('.modal').toggleClass('modal--show');
});
CSS
.overlay {
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal {
visibility: hidden;
}
.modal__contents {
background: white;
width: 32rem;
position: absolute;
left: 50%;
margin-left: -16rem;
top: 6rem;
min-height: 32rem;
}
.modal__contents h1 {
margin: 0;
padding: 0;
line-height: 32rem;
text-align: center;
display: block;
}
.modal__close {
position: absolute;
right: 2rem;
top: 2rem;
text-decoration: none;
display: none;
}
.modal--show {
visibility: visible;
width: 100%;
position: absolute !important;
z-index: 50;
opacity: 1;
height: 100%;
}
.modal--transition {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal--show .modal--transition {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
I think what is throwing this off is since the button to activate this is generated by the handlebar.js template, it is copied and made dynamically and can't seem to single out the one that is being clicked?
Is there a way I can get this to work so it pulls the {{cells.ImageURL}} of the same cell where it was clicked on?
Here is a JSFiddle to show you what I mean.
$(document).on('click', "a.btn", function() {
$('.modal img').prop('src', $(this).data('img'));
$('.modal').toggleClass('modal--show');
});
although that means that every button would need a data-img="" attribute with the corresponding image or if the image is within the a element you could use
$(document).on('click', "a.btn", function() {
$('.modal img').prop('src', $(this).find('img').prop('src'));
$('.modal').toggleClass('modal--show');
});

Categories

Resources