淡入淡出两个图像 [JavaScript]

Question

我正在尝试使用 2 个按钮和淡入淡出效果制作一个简单的滑块。一切都应该正常工作，但事实并非如此。我的代码有什么问题？

@Edit：我已经发布了我所有的代码。

我尝试用 CSS 来做，但没有成功。我尝试过关键帧、过渡和 JS 动画。

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

Answer 1

onmouseover 也会影响子元素，因此在鼠标悬停时会同时触发这两个函数。

Answer 2

首先验证您的 html 中是否包含 jquery 脚本。其次，将您的函数包装在 $(document).ready() 函数中。

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

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

Answer 3

尝试在 jquery 中绑定悬停而不是 onmousover 内联 html 事件，我添加了 fiddle 并且工作正常，我对你的 css 进行了一些更改，特别是位置每个滑块的绝对值和容器的相对值。

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

这里是 css 更改：

#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

淡入淡出两个图像 [JavaScript]

Fade In and Out two images [JavaScript]

html

javascript

image

slider

button