We Keep Coding

add transitional effect (fade-in) from small image to large image on button click

Noob here.
I've written a javascript which will trade/swap out a small image for a larger (both wider and taller) image.
The SMALLER IMAGE (the default) appears on load and is part of the brief/condensed view. When we CLICK ON THE HEADLINE, we open the larger/detailed view and the short descriptions are replaced by more in-depth/longer text descriptions.
I am unfamiliar with js, but I've managed to get myself to this point which everything I want to happen is happening. However, looking at the result, it feels a little jarring, hence i'd like to ease the speed of the transformation - as the depth of the window is largely determined by transition/replacement of the larger image, I would like to if it is possible, transform/transition/animate the replace of the small image to the large on taking maybe a second to do so?
I am looking for help in achieving. The end goal being that the the replacements don't appear quite so fast so as not to be so jarring.
I would like to avoid jQuery if possible.
function sw_switchDETAILS() {
// transoform content
// changing div class => allows hide/show of specific content
const element = document.getElementById("description00");
if (element.className == "showTHIS") {
element.className = "hideTHIS";
} else {
element.className = "showTHIS";
}
}
function pictureChange() {
// transoform image
if (document.getElementById("image00").src == "<?=$square;?>") {
document.getElementById("image00").src = "<?=$profile;?>";
} else {
document.getElementById("image00").src = "<?=$square;?>";
}
}
.wp-100 {
width: 100%;
}
.wx-200 {
width: 200px;
}
.wx-50 {
width: 50px;
}
.wx-60 {
width: 60px;
}
.wx-80 {
width: 80px;
}
.wx-100 {
width: 100px;
}
.mwx-200 {
max-width: 200px;
}
.showTHIS {
/* border:4px solid lightgoldenrodyellow; */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.hideTHIS {
/* border:4px solid lightblue; */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
/* hide extended content => Full Description, Participants, Location */
div#description00.hideTHIS p#hd-description.contentHIDE,
div#description00.hideTHIS p#hd-participants.contentHIDE,
div#description00.hideTHIS p#hd-location.contentHIDE {
display: none;
overflow: hidden;
}
/* show small img => as we are in teaser / short / minimal content mode */
div#image00.hideTHIS img.largeIMG {
display: none;
overflow: hidden;
}
/* show breif/basic teaser content => breif description
/* hide breif as we know are showing full description */
div#description00.showTHIS p#sw-breif {
display: none;
overflow: hidden;
}
/* hide small img - use larger image as we have available white space */
div#image00.showTHIS img.smallIMG {
display: none;
overflow: hidden
}
.btn_toggleTITLE {
writing-mode: horizontal-tb !important;
font-weight: bold;
font-size: 18px;
font-family: 'ff-bscompMED';
color: #981e21;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-align: left;
background-color: transparent;
margin: 0 0 .3em 0;
padding: 0px;
border-width: 0px;
border-style: outset;
border-color: transparent;
border-image: initial;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mSIDES-8px mb-8px " style="border:4px solid #dedede!important;">
<table id="" class="">
<tr>
<td class="va-top pa-8px pr-none">
<img id="image00" src="http://placekitten.com/80/80">
</td>
<td class="va-top wp-100 pa-8px">
<p id="" class="mb-4px">
<button id="btn00" onclick="sw_switchDETAILS(); pictureChange()" class="btn_toggleTITLE ta-justify fs-20px ff-bscompMED">STORY / ARTICAL TITLE HERE</button>
<sup class="fs-14px">x | x | x</sup>
go 2 thread <i class="fas fa-rocket"></i>
</p>
<div id="description00" class="hideTHIS">
<p id="sw-breif" class="wp-100 ta-justify mb-4px"><strong class="c-redDARK">BRIEF:</strong> Breif description visible if extended desc hidden; 128 characters or less</p>
<!-- this content should be hidden on initial load, revealed with mouse click on title -->
<p id="hd-description" class="wp-100 ta-justify mb-4px contentHIDE"><strong class="c-redDARK">DESCRIPTION:</strong> Extended descrip hidden if breif desc visible; Upto 1000 characters; That's great. You did the hardest part. You took the jump, you didn't know where you were gonna come down. And that's it. That's
those little brave baby steps we gotta take. To try and become whole again, try and find purpose. I went in the ice in '45 right after I met the love of my life. Woke up 70 years later. You gotta move on. Gotta to move on. The world is in
our hands. It's left to us guys, and we got to do something with it. Otherwise... Thanos should have killed all of us.</p>
<!-- this content should be visible on initial load, hidden on mouse click of title -->
<p id="sw-order" class="wp-100 ta-justify mb-4px contentHIDE"><strong class="c-redDARK">ORDER:</strong> Breif description visible if extended desc hidden; 128 characters or less</p>
<p id="hd-participants" class="wp-100 ta-justify mb-4px contentHIDE"><strong class="c-redDARK">PARTICIPANTS:</strong> Extended descrip hidden if breif desc visible; Upto 1000 characters; </p>
<!-- this content should be hidden on initial load, revealed with mouse click on title -->
<p id="hd-location" class="wp-100 ta-justify mb-4px contentHIDE"><strong class="c-redDARK">LOCATIONS:</strong> Extended descrip hidden if breif desc visible; Upto 1000 characters; </p>
</div>
</td>
</tr>
</table>
</div>
<?php
# st test variables
$profile = 'http://placekitten.com/200/500';
$square = 'http://placekitten.com/80/80';
?>

Resize highchart based on container changing NOT window resize

Here's a code pen that illustrates the code I will place here: https://codepen.io/andrewsunglaekim/pen/MmmxvO
Don't mind the terrible html, I just copied a simple high charts demo.
The Html is simple:
<div class="flexContainer">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div class='flexToggle'>Flex it</div>
</div>
Simple chart nested within a flex container.
The CSS:
.flexContainer {
display: flex;
}
#container {
transition: flex 0.5s ease;
flex: 3;
background: red;
}
.flexToggle {
transition: flex 0.5s ease;
flex: 1;
background: green;
}
#container.flexed {
flex: 1;
}
.flexToggle.flexed {
flex: 3;
}
Here's the simple jQuery script that toggles the flexed class:
$(".flexToggle").on("click", function(){
$("#container").toggleClass("flexed")
$(".flexToggle").toggleClass("flexed")
})
I want the chart to resize dynamically with the transitioning flex elements. Everything I've seen is a work around leveraging windows resizing, but I have no event like that in this case. Writing a setInterval to redraw during the transition seems hacky. Is there a configuration piece I'm missing that makes this really simple?

After some research, you can fix the horizontal scaling by simply adding
.highcharts-container, .highcharts-container svg {
width: 100% !important;
}
to the CSS

How can I make this Jquery animate() with css3 animations?

This is my jfiddle
And this is my actual code
$card.animate({
left: "1000px"
}, 500, function(){
$card.hide(500);
});
(I dont know why 'left' didnt work on jfiddle) Basically ive got a container with 5 $cards there. When user swipes the card (already implemented) the animate() is triggered and the card slides to the rightand then disappears. How can I implement such thing in CSS animations instead of using Jquery? Ive read that CSS animations run faster (and I proved it on my mobile device, the hide() runs really slow)... Any help or advice will be appreciated

First of all, create a class that you can trigger via jQuery that will have the animation.
Then, using you have two options: transition or animation. Transitions are simpler and more direct, but you can do more with animations.
Here is how I would suggest to do it: a transition for the movement, and an animation to recreate the hide() function.
#keyframes hide {
99% { display: auto; }
100%{ display: none; opacity: 0; }
}
.myelement {
transition: all .5s;
position: absolute;
left: 0;
}
.myelement.toLeft {
left: 2000px;
animation: hide .5s 1 forwards;
}
To trigger it, simply do this:
$(".myelement").addClass("toLeft");
Here is a working JSFiddle.
And like #MohitBhardwaj said, it is necessary for you to set position to absolute, relative, or static in order for positioning (i.e., the left property) to work.
It's also important to note that a transition needs an initial value. I added left: 0 to do this. Otherwise, (with a CSS transition) it would simply jump to 2000px because there is no starting point.
Also, because 2000px as a left value is very large, I suggest you change the parent element's scroll to overflow: hidden, so that the extraneous scroll bar doesn't appear.

Your left didn't work, because you need to set position to a value other than static (which is default) for it to work.
As for using CSS, you can add a class instead of animating in jQuery. This class can change the transition which you can set in css as per your requirements.
var my_div = $('.myelement');
my_div.on('click', function() {
var $this = $(this);
$this.addClass("gone");
setTimeout(function(){
$this.hide();
}, 600 );
})
#mywrapper
{
overflow: hidden;
}
.myelement {
height: 200px;
width: 200px;
background-color: red;
opacity: 1;
position: relative;
transition: all 0.5s ease;
opacity: 1;
left: 0px;
}
.myelement.gone
{
left: 500px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mywrapper">
<div class="myelement">
Click me please
</div>
</div>

How to add delay in css hover on a div that was displayed none?

My first div is a simple blue square, my second div is a simple red square with display:none;. when hover the first one (the blue one) the second appears with text and image etc.. but what i want is a simple effect of delay or sliding (if possible, but if not a simple delay would be cool) i'm working on it from 2hours without any success, please any help ?
This is the jsffidle example here
this is my code :
<div class="first">
<div class="second">
<h1 class="hover-title">Hello ! </h1>
</div>
CSS :
.first{
transition-delay:2s;
width:100px;
height:100px;
background-color:blue;
}
h1{
color:gold;
}
.second{
display:none;
background-color:red;
}
.first:hover .second{
display:inline-block;
width:100%;
height:100%;
}
Thank you all.

CSS only solution
I didn't start with your example because you were missing some notions that are important to have in mind when trying to create a sliding div upon an initial one. Let me explain :
JSFiddle
HTML
<div class="content-container">
<div class="content-teaser">
Catchy teaser here
</div>
<div class="content-description">
Description that might be longer than the catchy teaser sentence <button>see more</button>
</div>
</div>
CSS
.content-container {
width : 100px;
height : 140px;
position : relative;
overflow : hidden;
}
.content-teaser {
width : 100px;
height : 140px;
background : blue;
position : absolute;
color : white;
}
.content-description {
width : 100px;
height : 140px;
background : red;
position : absolute;
margin-top : 140px;
transition : .25s;
}
.content-description:hover {
margin-top : 0px;
}
.content-teaser:hover + .content-description {
margin-top : 0px;
}
Explaination
You see 3 <div></div> :
The parent, this is the one which will help us hide the "hidden" div that is in fact marged, but you don't see it because of the property overflow : hidden
The "teaser" div that is the one which is displayed by default
The "hidden" div that is marged and so hidden because of the property right above
So the trick is to use this famous overflow : hidden. You first set all your divs, parent and children, the same width and height. Then, you want to use a special position property to put the "hidden" div on top of the "teaser" div using position : absolute for each one. So the parent will naturally have the position : relative to tell your children div to be position relatively to this div, because by default <body> is in position : relative.
Then, you applyied overflow : hidden to the parent, so when marging the future "hidden" div you will not see it.
Finally, you can use some CSS to alter an element according to the event of an other using + selector. So the following CSS :
.content-teaser:hover + .content-description {
margin-top : 0px;
}
Means :
Put a margin on the div that have the class .content-description when the div with the class .content-teaser is :hovered.

This CSS code may help you to find the solution.
.second{
display:inline-block;
height: 100%;
width: 100%;
background-color:red;
opacity: 0;
transition: opacity 0.5s ease;
}
jsfiddle

You can use css transitions like
#my_div:hover{
/*Your styles placed here*/
-moz-transition:all 1s linear;
-webkit-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
In my case 1s is the delay time, you can change that to any value you like

CSS transition only works once in FF and Chrome

I am having an issue with CSS transitions and different browsers. The following Fiddle works fine on IE (the text on the right hand side correctly fades in when you hover over the items on the left and you can switch to other items with the transition still firing on every new hover), but for some reason FF and Chrome will no longer do the transition after selecting one of the items on the left.
jsfiddle link
The CSS transition code:
.FAQItemText.active, .FAQItemTextDark.active, .solutionText.active {
-webkit-transition: opacity 1500ms ease;
-moz-transition: opacity 1500ms ease;
-o-transition: opacity 1500ms ease;
transition: opacity 1500ms ease;
opacity: 1;
}
Please can anyone help me fix it to make it work on all browsers?
Thanks

A CSS transition can't repeat. if you want something that repeat, use a CSS animation
Link : http://www.w3schools.com/css/css3_animations.asp

Your code was overly complicated and there are much simpler ways of doing what you're trying to achieve. I rewrote your JS to work like it should, altered your CSS classes and rules to better suit the purpose and cleaned up your DOM a little bit also.
Check out the code below, where I have explained what changes I've made:
$(function(){
//select all the link elements and add needed event handlers:
$(".leftSlidePanel>a")
.mouseenter(preview)
.mouseleave(preview)
.click(selectSlide);
});
function preview(event){
// This is the slide the element you clicked on links to:
var targetSlide=$(event.currentTarget).attr("href");
// Let's make a selector to select the .leftItem inside the link you hovered and our target slide:
var previewedItem=$(event.currentTarget).find(".leftItem").add(targetSlide);
// and another selector to select all the .leftItems and .FAQItemTexts aparat from the ones being targeted:
var hiddenItems=$(".leftItem, .FAQItemText").not(previewedItem);
// Next add or remove classes from our selected items depending on wheter it was mouseeneter or mouseout:
if(event.type=="mouseenter"){
previewedItem.addClass("previewed");
hiddenItems.addClass("hidden");
}else{
previewedItem.removeClass("previewed");
hiddenItems.removeClass("hidden");
}
}
function selectSlide(event){
// Prevent default behaviour of clicking a link:
event.preventDefault();
// Remove class selected from all .leftItems and .FAQItemTexts:
$(".leftItem, .FAQItemText").removeClass("selected");
// And add said class to targeted elements:
$(event.currentTarget).find(".leftItem").add($(event.currentTarget).attr("href")).addClass("selected");
}
.slideContentContainer {
width:70%;
height:100%;
min-width:1050px;
margin-left:auto;
margin-right:auto;
padding-top:80px;
}
.leftSlidePanel {
float:left;
width:30%;
padding-top:29px;
}
.rightSlidePanel {
float:right;
width:70%;
padding-top:29px;
}
.leftItem {
color: transparent;
width: 100%;
margin-top:0;
text-align: left;
padding-bottom: 23px;
font-family:"Helvetica W01 Cn" !important;
}
.leftItem h4 {
margin: 0;
padding-top:5px;
}
/* this is how your links on the left will look like when they're selected or previewed: */
.leftItem.selected, .leftItem.previewed {
color: rgb(227, 114, 22);
}
.dark.selected {
color: rgb(49, 49, 50);
}
/* This is the style your FAQItemText has normally and when another item is being previewed: */
.FAQItemText, .FAQItemText.selected.hidden {
width: 95%;
opacity: 0;
float:right;
font-size: 20px;
padding-top:29px;
text-align: justify;
color: rgb(227, 114, 22);
font-family:"Helvetica W01 Cn" !important;
display:none;
}
/* Instead of creating another class with almost the same rules as another, create a subclass: */
.FAQItemText.dark {
color: rgb(49, 49, 50);
}
/* This is the style your FAQItemText will have when it's either selected or previewed: */
.FAQItemText.selected, .FAQItemText.previewed{
opacity: 1;
display:block;
/* Firefox and IE support animations without vendor prefixes, so -webkit- is the only one you'll need */
-webkit-animation: fade 1.5s 1;
animation: fade 1.5s 1;
}
/* using display:block wile transitioning opacity can often doesn't give you the effect you'd want, but this can be fixed by using an animation instead: */
#-webkit-keyframes fade{
0% {display:none; opacity:0;}
1% {display:block; opacity:0;}
100% {display:block; opacity:1;}
}
#-keyframes fade{
0% {display:none; opacity:0;}
1% {display:block; opacity:0;}
100% {display:block; opacity:1;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="faqs">
<div class="slideContentContainer">
<div class="leftSlidePanel">
<div id="menuItem11" class="leftItem selected"><h4>1</h4></div>
<div id="menuItem12" class="leftItem"><h4>2</h4></div>
<div id="menuItem13" class="leftItem"><h4>3</h4></div>
<div id="menuItem14" class="leftItem"><h4>4</h4></div>
<div id="menuItem15" class="leftItem"><h4>5</h4></div>
<div id="menuItem16" class="leftItem"><h4>6</h4></div>
</div>
<div class="rightSlidePanel">
<div id="slideItem11" class="FAQItemText selected">BLAH 1 BLAH.</div>
<div id="slideItem12" class="FAQItemText">BLAH 2 BLAH.</div>
<div id="slideItem13" class="FAQItemText">BLAH 3 BLAH.</div>
<div id="slideItem14" class="FAQItemText">BLAH 4 BLAH.</div>
<div id="slideItem15" class="FAQItemText">BLAH 5 BLAH.</div>
<div id="slideItem16" class="FAQItemText">BLAH 6 BLAH.</div>
</div>
</div>
</div>

Thank you all for your suggestions, after a while of googling I came across this which seems to do the trick.
So I changed my js code from this:
function ShowSlide(slide, slideItem) {
//Reset page
resetAllHighlights(slide);
//Show needed ones.
jQuery('#slideItem' + slide + slideItem).show();
jQuery('#slideItem' + slide + slideItem).addClass("active");
jQuery('#menuItem' + slide + slideItem).addClass("itemSelected");
}
To this:
function ShowSlide(slide, slideItem) {
//Reset page
resetAllHighlights(slide);
//Show needed ones.
jQuery('#slideItem' + slide + slideItem).show(0);
jQuery('#slideItem' + slide + slideItem).addClass("active");
jQuery('#menuItem' + slide + slideItem).addClass("itemSelected");
}
And it now works in all browsers.