Develop Reference

Jquery: Smooth transiton effect while changing classes in html page

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?

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 make a custom context menu in an Angular App?

I've been working on a custom context menu for a table on one of my views in an angular app. The idea is to display a hidden, absolutely-position div on right click of any particular row in this table.
I think the event is returning the correct clientX and clientY, but where I'm running into trouble is when I try to position this hidden div to the coordinates of the right-click event. What I'm using, right now, is this:
$('.toggled-options-status-change').css({
top: event.clientX,
left: event.clientY
}).show();
where .toggled-options-status-change is the class name of the hidden div.
What's basically happening is that the div is being position is seeming random spots, so it can't simply be fixed by decremented the top and left positions be constant values.
It's hard for me to tell what's going on, and I wish I could share a fiddle or something with you guys. What I'm hoping is that someone has come across an issue like this before and knows a direction to go and investigate further.
Edit - CSS
.toggled-options-status-change {
position: absolute;
display: none;
}
.off-canvas-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
overflow: hidden;
.inner-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-ms-transition: -ms-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
}
Edit - HTML
relevant html outline:
<html>
<body>
<div class="off-canvas-wrap">
<div class="inner-wrap">
<div ng-view>
...
</div>
</div>
</div>
</body>
</html>

Almost always with these sorts of things, for me at least, the answer is exceedingly simple and makes me look like a fool for missing it the first time around. Oh well, it's nice to figure it out regardless.
top should be clientY, not clientX, and vice versa. omg

Animating CSS by transitions when a class is added to an element

I'm using the Foundation framework on a project & it's Top Bar feature for navigation allows for drop-down navigation to appear on hover.
During the hover event it adds a .hover class to the relevant element, therefore the changes in CSS pop into sight rather than animating by way of a smooth transition.
This got me thinking. Is it possible to animate (via transitions or similar) the changes in CSS definitions?
Take this example. Here is our default element:
<div class="a-box">Some content</div>
And it's default CSS:
.a-box {
width: 200px;
height: 200px;
background: red;
}
On hover the framework (which I do not wish to edit the core file to keep it clean for updates) adds the hover class. Making our element now look like this:
<div class="a-box hover">Some content</div>
Here could be some CSS for the hovered element:
.a-box.hover {
width: 400px;
// I thought perhaps adding the following would work but it doesn't appear to
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
I'd be keen to hear others POV on this! I'm not sure if this is a duplicate, but all the posts I've read relate to some form of jQuery animation.

You aren't far off the mark, here is a working example.
The main error in your example is that you have
<div class="my-box hover">Some content</div>
But your CSS is looking for a-box not my-box.
As a habit, I normally define the animation on the simplest (most general) selector for the element and then any additional selectors will benefit from it.
.my-box {
width: 200px;
height: 200px;
background: red;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
.my-box.hover {
width: 400px;
}