Jquery: Smooth transiton effect while changing classes in html page - javascript

I have a HTML page where I have 3 divs. Initally 2 are visible(col1, col2) and one is hidden(col3). On button click, I want to hide the second div, change size of first and make third one visible. I want to do this with a smooth transition effect. The divs are as follows:
<div class="row">
<div class='col-md-12'>
<div class="row">
<div id="col1" class="col-sm-8">
<div class="lead">Chart title goes here</div>
</div>
<div id="col2" class="col-sm-offset-1 col-sm-3">
<div class="lead">Second Div</div>
<button id="trig" class="btn btn-contrast">Reflow
Me</button>
</div>
<div id="col3" class="col-sm-8 hidden">
<div class="lead">Fill form</div>
</div>
</div>
</div>
</div>
The script that I currently have only changes the classes but the transition is very abrupt.
<script>
$("#trig").click(function(){
$("#col1").toggleClass("col-sm-offset-1 col-sm-3");
$("#col2").toggleClass("hidden");
$("#col3").removeClass("hidden");
});
</script>
I tried this link: http://fiddle.jshell.net/274NN/5/ but this didn't work out well for me. I am new to CSS and jQuery and don't exactly understand what to do. Kindly help!

You had your ease set to 0.3s, so it took 0.3 seconds to complete. I changed it to 1.0s here.
The code is as follows:
.row-fluid div {
height: 200px;
-webkit-transition: width 1.0s ease, margin 1.0s ease;
-moz-transition: width 1.0s ease, margin 1.0s ease;
-o-transition: width 1.0s ease, margin 1.0s ease;
transition: width 1.0s ease, margin 1.0s ease;
}
Note that this is using transitions, not JQuery.
If you have something in JQuery you'd like to be looked at specifically, you'll need to link us to something with it implemented, the code you have given doesn't include the classes needed by the code.

So given your HTML and script, I would recommend changing your script a bit:
$("#trig").click(function(){
$("#col1").toggleClass("col-sm-offset-1 col-sm-3");
$("#col2").hide();
$("#col3").show(2000);
});
Basically what this does is that when you click the button you do:
Toggle (switch) from col-sm-8 to col-sm-offset-1 col-sm-3 on your div with ID col1.
Hide the div with ID col2, what this does is basically append the class hidden to that div. I recommend NOT using animation on this one to avoid too many conflicting animations!
Removes the class hidden from the div with ID col3. Notice the parameter 2000 in the show function? That means it should use 2 seconds to display this div.
In addition I've added some pretty basic CSS to allow animations when switching class on divs. In this case it's the div with ID col1.
#col1 {
background: red;
}
#col2 {
background: green;
}
#col3 {
background: blue;
display: none;
}
[class*='col-sm'] {
transition: all 2s;
}
Working fiddle:
https://jsfiddle.net/DTcHh/38884/
Oh and by the way:
Notice what I mean about competing animations? It's lagging when multiple animations are running at the same time.
You could implement event listeners to start animate in the new div when the first is removed, or maybe use jQuery fadeIn() and fadeOut() since they have the possibility to add a function once it's finished.
For instance:
$('#col2').fadeOut(2000, function() {
$('#col3').fadeIn(2000);
});
What this does is that it fades out the div with ID col2, and once that's not visible anymore it starts fading in the div with ID col3. Maybe this would be a better solution?

Related

Transitions in fancyBox 3

Is it possible to specify which transition to use in fancyBox 3? There are 3 transitions I'm interested in:
Open slide/gallery
Navigate between slides
Close slide/gallery
By default, fancyBox 3 uses different transitions for different types of content.
<!--This will zoom in-->
<a data-fancybox href="#html-content">Open</a> <!--This will fade in-->
<div id="html-content" style="display: none;">
<p>This content does just fades in.</p>
</div>
Look at this codePen to see it in action, including the navigation transitions. For images we have:
Zoom in
Slide horizontally
Zoom out
For html content we have:
Fade in
Slide horizontally
Fade out
Is it possible to change this default behavior in fancyBox 3? For example to let also images fade in and out? I was not able to find any information on this in the documentation.
As of fancyBox version 3.1.20, this is possible through the options animationEffect and transitionEffect. You can find the documentation here.
Not sure if I'm getting this right... but if you want to fade in & out the images (between each transition) you can trick them by using a bit of CSS, add this to your jquery.fancybox.css:
.fancybox-slide.fancybox-slide--image {
opacity: 0;
-moz-transition: all 0.01s ease;
-o-transition: all 0.01s ease;
-webkit-transition: all 0.01s ease;
transition: all 0.01s ease;}
.fancybox-slide.fancybox-slide--image.fancybox-slide--complete {
opacity: 1!important;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;}
And also modify the speed of the jquery.fancybox.js lib to:
// Animation duration in ms
speed : 100
Disclaimer: I'm just a mortal and this is not the neatest solution, but worked for me (:

HTML Change Image with transition?

I've been experimenting with HTML5 for a bit, and i wanted to try to make an Image change when a mouse hovers over it. I've tried a couple of methods and none of them gave the desired effect. I've looked through multiple tutorials but they mostly explained how to add effects to the same Image, and not change it entirely.
This is the code i have now, it doesnt actually work as intended:
ul.imagetransition li img:hover {
background-image: url('Data/Images/Image 1Hover.png');
}
<section>
<ul class="imagetransition">
<li><img src="Data/Images/Image 1.png"/></li>
</ul>
</section>
In this code, the original image is previewed correctly, but when the mouse hovers over it it immediately adds a small part of the second image onto the first one. I've tried adding the transition effect code, but it didnt have any effect. I'll be doing more research regarding this, if anyone knows/understands how to get this done, please point me to the right directions! :D
Please let me know if further Information/Code is needed
Greatly appreciated,
Have a good day
Does it work for you?
HTML:
<ul>
<li id="aaa">
<img class="bottom" src="a.jpg">
<img class="top" src="b.jpg">
</li>
</ul>
CSS:
#aaa {
position:relative;
height:100px;
width:100px;
margin:0 auto;
list-style-type: none;
}
#aaa img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#aaa img.top:hover {
opacity:0;
}
From past experiences this won't work unless you use JS's getElementById and change the src of the background image. Either that or use a two in one kind of thing like
<div id="parent1">
<ul></ul>
</div>
Where if you hover over it the first one's background would have an opacity of 0 and the ul's opacity to one by using parent/child relation and activation or maybe try add !important at the end of the second background image restrictions like padding won't work coz that would only separate your images even more.
Hope this helps.
Ps: I was writing this on my phone :/ but now i edited it using my laptop
here are some examples using JS
the mouseover thing
and this is for the change image thing
i think you can piece these together finely.
HTML
<img class="bottom" src="a.jpg">
CSS
img
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
img:hover {
width: 300px;
}

will CSS transitions override each other?

I have two col-md-6 class and each contains a button in it, upon clicking, im using jQuery to toggleClass() of one between col-md-6 and col-md-12 and hide/show the other. I also use CSS transition to animate the toggling, but it would work for one class and if I click the other button, the transition is not working.
Does multiple class selector cause issue with transitions?
.hello, .bye{
-webkit-transition: width 500ms;
-moz-transition: width 500ms;
-o-transition: width 500ms;
transition: width 500ms;
}
Here's the problem in jsfiddle
Your question is a little vague, so I took it upon myself and made some necessary changes to your code, so that the end result will resemble a lot what you (most likely) have in your mind.
CSS Notes:
To avoid having #btn1 and #btn2 overflow .hello and .bye respectively, you need to use overflow: hidden.
To avoid having .hello and .bye wrapping during the transition if there's not enough room for both, you need to use: padding: 0.
If you want your buttons to remain at the exact position they were (15px indented), use: margin-left: 15px.
CSS Code:
.hello,
.bye {
padding: 0;
overflow: hidden;
-webkit-transition: width 500ms;
-moz-transition: width 500ms;
-o-transition: width 500ms;
transition: width 500ms;
}
#btn1,
#btn2 {
margin-left: 15px;
}
JS Notes:
Your code is kind of inefficient as you basically repeat the same code over and over, so I created a function for you that can be used for both buttons.
JS Code:
Check out the full JavaScript code in the following:
Codepen: → here;
jsFiddle: → here;

How to use CSS3 transitions

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.

Trying to add classes to multiple divs by hovering over one div

Basically, I have a page made up of five vertical stripes of different colors. These will eventually be links to different sections or something like that.
Check out this fiddle to get a general idea of what I'm talking about: http://jsfiddle.net/nolbear/4fea3/
Here's my JavaScript:
$('#banner1').hover(function() {
$(this).toggleClass('forty');
$('#banner2').toggleClass('twenty');
$('#banner3').toggleClass('twenty');
$('#banner4').toggleClass('ten');
$('#banner5').toggleClass('ten');
});
I'm trying to get it so that when you hover over the top stripe, it becomes larger, and all the other stripes get smaller to compensate. The stripes should take up the entire height of the page at all times (that's why I'm using percentages).
I don't understand why the code I've written isn't working, I've taken it directly from other StackOverflow questions that have been answered and it still won't work for me.
The first problem is that you didn't set jQuery in your fiddle
Secondary, you set the height by id which overrides the class values so instead I styled them by class.
http://jsfiddle.net/4fea3/4/
<div id="banner1" class="banner">
</div>
<div id="banner2" class="banner">
</div>
<div id="banner3" class="banner">
</div>
<div id="banner4" class="banner">
</div>
<div id="banner5" class="banner">
</div>
.banner {
width: 100%;
height: 20%;
transition: all 0.2s ease 0.0s;
-moz-transition: all 0.2s ease 0.0s;
-webkit-transition: all 0.2s ease 0.0s;
-o-transition: all 0.2s ease 0.0s;
-ms-transition: all 0.2s ease 0.0s;
overflow: hidden;
}
Your code is working, it's just the css that is not working. You've applied height: 20% to each banner, and then height: x% to each css class that you wish to change the height of the banners. Unfortunately the first height: 20% will override this. I've used !important to fix it in the fiddle: http://jsfiddle.net/4fea3/3/
Ideally you would avoid the !important and update your styling to override correctly when the classes are added.

Categories

Resources