Q:

Fade In and Out two images [JavaScript]

I'm trying to make a simple slider using 2 buttons and fade effect. Everything should be working but it's not. What's wrong with my code?
@Edit: I've posted all my code.
I tried to do it with CSS but didn't work. I've tried keyframes, transitions and JS animations.

$(window).scroll(function(e){ 
  $el = $('.fixedElement'); 
  if ($(this).scrollTop() > 100 && $el.css('position') != 'fixed'){ 
    $('.fixedElement').css({'position': 'fixed', 'top': '0px'});
  }
  if ($(this).scrollTop() < 100 && $el.css('position') == 'fixed')
  {
    $('.fixedElement').css({'position': 'static', 'top': '0px'}); 
  } 
});


$( document ).ready(function() {
 function hideFirst()
 {
  $("#SliderBack1").fadeIn('fast');
  $("#SliderBack2").fadeOut('fast');
 }

 function hideSecond()
 {
  $("#SliderBack2").fadeIn('fast');
  $("#SliderBack1").fadeOut('fast');
 }

});
@charset "utf-8";
/* CSS Document */

body
{
 margin: 0;
 padding: 0;
}

#Top
{
 width: 100%;
 height: 100px;
 background-color: #f1f1f1;
}

#Slider
{
 margin-top: 100px;
 width: 100%;
 height: 250px;
 background-color: #333;
 padding: 0;
}

#Slider img
{
 width: 100%;
 height: 300%;
}

#Choices
{
 position: absolute;
 width: 100%;
 height: 180px;
 background-color: #f9f9f9;
 padding: 0;
}

#Choices div
{
 cursor:pointer;
 font-family: "Segoe UI";
 text-align: left;
 padding-left: 10px;
 color: #333;
 
 background-color: #f9f9f9;
 
 width: 49.1%;
 
 display: inline-table;
 
 -moz-transition: 0.5s;
 -o-transition: 0.5s;
 -webkit-transition: 0.5s;
 transition: 0.5s;
 
 height: 180px;
}

#Choices div:hover
{
 -moz-transition: 0.5s;
 -o-transition: 0.5s;
 -webkit-transition: 0.5s;
 transition: 0.5s;
 
 background-color: #e5e5e5;
}

#Content
{
 position: absolute;
 top: 520px;
 width: 100%;
 height: 750px;
 background-color: red;
}

#Bottom
{
 position: absolute;
 top: 1270px;
 width: 100%;
 height: 100px;
 background-color: blue;
}

.fixedElement 
{
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
        <link href="Files/Style/MainStyle.css" rel="stylesheet" type="text/css" />
        <script src="Files/Script/MainScript.js"></script>
  <title>Working</title>
 </head>
    
 <body>
     <div id="Top" class="fixedElement"></div>
        
     <div id="Slider">
         <img id="SliderBack1" src="Files/Images/slider1.jpg" />
            <img id="SliderBack2" src="Files/Images/slider2.jpg" />
        </div>
        
        <div id="Choices">
         <div div="MaintenanceButton" class="button1" onmouseover="hideFirst()">
          <h3>Manutenção</h3>
           de computadores e notebooks
         </div>
         <div id="MaintenanceButton" class="button2" onmouseover="hideSecond()">
          <h3>Desenvolvimento</h3>
           de sites
         </div>
        </div>
        
        <div id="Content"></div>
        <div id="Bottom"></div>
 </body>
</html>

A:

Try binding hover in jquery instead onmousover inline html event, I added fiddle and work fine, I has made some change in your css, specifically position absolute for each slider and relative for container.
$(".button1").hover(function(){
        $("#SliderBack1").fadeIn('fast');
        $("#SliderBack2").fadeOut('fast');
})

Here is css changes: 
#Slider
{
    margin-top: 100px;
    width: 100%;
    height: 250px;
    background-color: #333;
    overflow:hidden;
    position: relative;
}

#Slider img
{
    width: 100%;
    height: 300%;
    position: absolute;
    top: 0;
    left: 0;
}

Fiddle here

