淡入淡出两个图像 [JavaScript]答案

【问题标题】：Fade In and Out two images [JavaScript]淡入淡出两个图像 [JavaScript]
【发布时间】：2015-02-22 15:36:53
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

函数如何调用？
你已经包含了 jQuery 不是吗？因为它不在你的 sn-p 中。
你能添加一段代码吗
我已经编辑了帖子，现在所有的代码都在这里了。

标签： javascript html image button slider

【解决方案1】：

尝试在 jquery 中绑定悬停而不是 onmousover 内联 html 事件，我添加了小提琴并且工作正常，我在你的 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;
}

小提琴here

【讨论】：

只是恭维答案，真正工作使用这个：stackoverflow.com/questions/19456210/…

【解决方案2】：

onmouseover 也会影响子元素，因此在 mouseover 时您会同时触发这两个函数。

【讨论】：

我尝试通过 $('.button1').hover(function () { }); 调用它但效果不佳。

【解决方案3】：

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

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

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

【讨论】：