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

How can I track down a:hover jquery source?

I want to display some footer logos in white. Then, on hover, they reveal the logos' true colors. I have implemented this on other websites and the background of the original link is simply replaced with the hover background.
I tried implementing this on some newer themes purchased from themeforest, which leads me to believe some newer version of query is doing something weird. On the newer sites, the new background will slide up, or from the bottom right corner. Here is an example of the undesired behavior:
http://idtools.org/id/grasshoppers/new/about.php
I have tried removing .js files and .css files one by one and none had an effect, not even using different jquery versions. How can I figure out what is responsible for this hover animation?
link to desired logos:
http://itp.lucidcentral.org/id/palms/palm-id/index.html
HTML
<div id="logos">
<ul>
<li id="usda"></li>
<li id="uf"></li>
<li id="lucid"></li>
</ul>
</div>

Your problem is that you've got css transitions on these affects. Check out line 67 of your style.css file:
a, button, .owl-buttons div {
-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;
}

You should be able to use CSS instead. With the :hover pseudoclass, you can alter an element's appearance when users hover over it.
li#usda:hover {
background-image: url("/path/to/coloured/image");
}
li#uf:hover {
background-image: url("/path/to/coloured/image");
}
li#lucid:hover {
background-image: url("/path/to/coloured/image");
}

You can do it with css and here is a link to a working example:
Original Posts:
Image Greyscale with CSS & re-color on mouse-over?
http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/
"Add the following CSS class to your image elements:"
img.grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
}
"The hover effect:"
img.grayscale:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none;
}
Working CodePen Example: http://codepen.io/Cheesetoast/pen/sfCKa

resizing animation on wikipedia

If you go to a Wikipedia page in Chrome and ctrl+scrollup or ctrl+scrolldown the resize is done in an animation.
How is this achieved?
(In FF only the
Read
View source
View history
links in the top right corner animate)

If you examine the CSS with Chrome's Inspector, you will find this rule:
body.vector-animateLayout div#content, body.vector-animateLayout div#footer {
transition: margin-left 250ms,padding 250ms;
-moz-transition: margin-left 250ms,padding 250ms;
-webkit-transition: margin-left 250ms,padding 250ms;
-o-transition: margin-left 250ms,padding 250ms;
}
This smoothly animates the margin-left and padding properties, which Webkit seem to modify when zooming in and out. Firefox should also animate, but it doesn't.

Wikipedia does not animate in most browsers, but there is animation attempting to go on. The first clue was the vector-animate class on the body of each page. Their load.js file (called at the bottom of each page) attempts to create an animated switch when users zoom in and out, but this is not supported in most browsers (only a lucky few). It does not work in most FF and IE versions.
The load JS file is found here://bits.wikimedia.org/de.wikipedia.org/load.php?debug=false&lang=de&modules=site&only=scripts&skin=vector&*
In addition, they also use some CSS to try to animate this:
body.vector-animateLayout div#content, body.vector-animateLayout div#footer {
transition: margin-left 250ms,padding 250ms;
-moz-transition: margin-left 250ms,padding 250ms;
-webkit-transition: margin-left 250ms,padding 250ms;
-o-transition: margin-left 250ms,padding 250ms;
}
This would get the same effect for Webkit browsers. A Reference about this is found here. As you will note, this transitions CSS3 property is not very well supported yet.
For more information on the support of this property, check here.