Develop Reference

Internet Explorer CSS transition issue

I have some elements which width changes to 0 with JS on scrolling and when transition width to 0 is beginning, elements firstly become very big, but then do as need. In Chrome all works perfectly.
Here is an example of this https://jsfiddle.net/dx914ut0/
What sholud I do?
UPD: Just need to add units.

Instead of just transition try using the code below. This will make sure it works on every browser.
-webkit-transition: visibility 0s, opacity 2s ease-out;
-moz-transition: visibility 0s, opacity 2s ease-out;
-o-transition: visibility 0s, opacity 2s ease-out;
transition: visibility 0s, opacity 2s ease-out;

try function onscroll in your html:
<div onscroll="topFunction()" id="myBtn" title="Go to top"></div>
except if you want this to happen on click, then you should probably add actionListiner or something.

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 (:

How to animate div on changing margin using js

div.style.marginLeft="-200px";
On click of a button above statement executes but it just changes the margin instantly, but I want that it moves while changing the margin.
So I need a JavaScript solution for that.

Actually you can probably solve this with CSS. If you have the margins changing already, try applying a CSS transition to the element.
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
In this case the "all" is a reference to the property you want to apply the transition to. You could probably use margin-left, but all will cover pretty much all available transition properties.
Here's more info: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Twitter Bootstrap 2.0.4 Modal - How to apply modal fade in effect to a newly created modal class style?

I am learning Web Design by myself and now I've started playing with twitter bootstrap's modal JavaScript plugin.
I've created a new modal class named modal-login, it's a login form inside a modal window. Things have been working good, but the fade effect/slide down does not work. The effect that bring down the modal box from top to center.
I don't have yet deep understanding of javascript and jQuery.
My question now is, can we edit the bootstrap-modal.js file, so that I may include my new modal class named modal-login and modal-register? so that it could take advantage of the modal fade in effect?

You shouldn't need to edit the bootstrap-modal.js file. You just need to add the fade class to your modals, and then add some CSS rules.
For example:
.modal-login.fade {
top: -25%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-ms-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal-login.fade.in {
top: 50%;
}
Even better would be if you still kept the plain modal class on your new one's, and just used your new classes to do overrides. That way you could inherit the CSS above, without having to duplicate it.

ToggleClass animate jQuery?

I have a section on my website that when a user clicks I would like it to expand, I'm using the jQuery's toggleClass for this...
expandable: function(e) {
e.preventDefault();
$(this).closest('article').toggleClass('expanded', 1000);
}
This is working fine, only I'd like to somehow animate it. In chrome my article slowly grows to the new size, only in Firefox it 'instantly' resizes itself with no animation, is there a way to have this animate?

jQuery UI extends the jQuery native toggleClass to take a second optional parameter: duration
toggleClass( class, [duration] )
Docs + DEMO

.toggleClass() will not animate, you should go for slideToggle() or .animate() method.

You can simply use CSS transitions, see this fiddle
.on {
color:#fff;
transition:all 1s;
}
.off{
color:#000;
transition:all 1s;
}

I attempted to use the toggleClass method to hide an item on my site (using visibility:hidden as opposed to display:none) with a slight animation, but for some reason the animation would not work (possibly due to an older version of jQuery UI).
The class was removed and added correctly, but the duration I added did not seem to make any difference - the item was simply added or removed with no effect.
So to resolve this I used a second class in my toggle method and applied a CSS transition instead:
The CSS:
.hidden{
visibility:hidden;
opacity: 0;
-moz-transition: opacity 1s, visibility 1.3s;
-webkit-transition: opacity 1s, visibility 1.3s;
-o-transition: opacity 1s, visibility 1.3s;
transition: opacity 1s, visibility 1.3s;
}
.shown{
visibility:visible;
opacity: 1;
-moz-transition: opacity 1s, visibility 1.3s;
-webkit-transition: opacity 1s, visibility 1.3s;
-o-transition: opacity 1s, visibility 1.3s;
transition: opacity 1s, visibility 1.3s;
}
The JS:
function showOrHide() {
$('#element').toggleClass("hidden shown");
}
Thanks #tomas.satinsky for the awesome (and super simple) answer on this post.

You should look at the toggle function found on jQuery. This will allow you to specify an easing method to define how the toggle works.
slideToggle will only slide up and down, not left/right if that's what you are looking for.
If you need the class to be toggled as well you can deifine that in the toggle function with a:
$(this).closest('article').toggle('slow', function() {
$(this).toggleClass('expanded');
});

Should have checked, Once I included the jQuery UI Library it worked fine and was animating...