淡入和淡出两个图像[JavaScript]

debugcn 发表于 Dev

萨德·费尔南德斯（Thadeu Fernandes）

我正在尝试使用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中绑定悬停，而不是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;
}

在这里摆弄

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。