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.

Up/Down picture by mouse hover

I want something like picture links in bottom of this site.Any body know whats the effect of the site or please suggest to me some javascript code example or library to make picture up/down on mouse hover and make some beautiful tooltip too.

You only need CSS, and on hover change the margin:
img {
margin-bottom: -75px;
margin-top: 20px;
padding-right: 40px;
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
img:hover {
margin-top: -20px;
}
This code is basically copied from the site you've provided. I would be careful by using it as is. Take it only as an example.

Replace backgroundColor with backgroundImage in jQuery animate effect

I have a working fade in/fade out jQuery example here:
http://jsfiddle.net/mcgarriers/NJe63/6/
However, I'm wondering if it is possible to replace the background-color red effect with a background image?
Many thanks for any pointers

How about trying something like this?
I altered the code from your jsfiddle link.
$('.box').mouseenter(function(){
$(this).stop().animate({opacity: 0}, 0).css('background', 'url(http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg)').animate({ opacity: 1 }, 1000);
}).mouseleave(function(){
$(this).stop().animate({opacity: 1}, 0).css('background', 'white');
});​

You could do this with CSS3. You could create a div tag to the size of your choice around the image then use a basic CSS3 transition.
#yourdiv a {
background-color: #FFF;
}
#yourdiv a:hover {
background-color: #000;
-webkit-transition: background-color 600ms linear;
-moz-transition: background-color 600ms linear;
-o-transition: background-color 600ms linear;
-ms-transition: background-color 600ms linear;
transition: background-color 600ms linear;
}
Or you can have a image fade into another with CSS3:
http://css3.bradshawenterprises.com/cfimg1/

You cannot fadein/fadeout background-image of a HTML element, but you can with background-color.
Would it possibly be your solution? Fade background image in and out with jQuery?

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.

change class based on page scroll

Basically I have a single page site that scrolls when the user clicks on the navigation menu.
<div id="mainnav">
<ul id="nav">
<li class="fadertwo"><a id="tst" onclick="CngClass(this);" href="index.html#abouttwo">About</a></li>
<li class="faderthree"><a id="sec" onclick="CngClass(this);" href="index.html#second">Curriculum vitae</a></li>
<li class="faderfour"><a id="third" onclick="CngClass(this);" href="index.html#thirdtwo">contact</a></li>
</ul>
</div> <!-- end mainnav -->
Using jquery (which im totally new to) it adds a class when the user clicks on each link.
Basically it transitions the background position.
.active {
background-position:bottom;
text-decoration:none;
-webkit-transition: .3s linear;
-moz-transition: .3s linear;
-o-transition: .3s linear;
transition: .3s linear;
}
Background is a 10px img repeating along the top.
#tst {background-image:url(../_images/whiteb.png);
background-repeat:repeat-x;
-webkit-transition: .3s linear;
-moz-transition: .3s linear;
-o-transition: .3s linear;
transition: .3s linear;
}
#sec {background-image:url(../_images/blackb.png);
background-repeat:repeat-x;
-webkit-transition: .3s linear;
-moz-transition: .3s linear;
-o-transition: .3s linear;
transition: .3s linear;
}
#third {background-image:url(../_images/greenb.png);
background-repeat:repeat-x;
-webkit-transition: .3s linear;
-moz-transition: .3s linear;
-o-transition: .3s linear;
transition: .3s linear;}
Now the jquery magic -
<script type="text/javascript">
var Lst;
function CngClass(obj){
if (typeof(obj)=='string') obj=document.getElementById(obj);
if (Lst) Lst.className='';
obj.className='active';
Lst=obj;
}
</script>
It works great changing the background position in a really smooth way when the user clicks it, but of course doesn't change based on the user scrolling the page naturally.
Now, I could set the body overflow to :hidden; and 'fix' that, but it's a bit hacky and will limit the content area and overall site layout.
What I'd like to do is use jquery to add the class .active to the a tag based on scroll position so it changes anyway.
I've looked around for hours and tried different things but my (lackof) knowledge of jquery limits me somewhat it implementing anything I find effectively.
Can anyone offer any solution?

Have a look at scrollspy
http://twitter.github.com/bootstrap/javascript.html#scrollspy
or
https://github.com/sxalexander/jquery-scrollspy

Or have a look at
http://imakewebthings.com/jquery-waypoints/