Javascript 让我的图像轻松些我正在为这个组织设计一个网站，希望他们的图片显示在页面的侧面，中间的主要内容。当到达页面的新部分时，图片将发生变化，以反映正在讨论的新内容（因此，在本例中，每个Div代表历史上的一个时期，在页面的侧面的列中表示）。我的问题是，我不知道如何在图片中添加照片过渡，这样它就不会“跳转”到合适的位置，而不是给用户一种在新div（部分）的mouseover上轻松就位的体验。任何和所有的建议都会受到欢迎，我也尝试过CSS3的缓入-缓出效果，但运气不好，因为我需要它在悬停的div上从黑色背景缓入到图片中（我真的不知道如何在CSS3中创建悬停在中间div上的效果，但只影响两个侧面div）。任何帮助都将不胜感激_Javascript_Jquery_Html_Css

Javascript 让我的图像轻松些我正在为这个组织设计一个网站，希望他们的图片显示在页面的侧面，中间的主要内容。当到达页面的新部分时，图片将发生变化，以反映正在讨论的新内容（因此，在本例中，每个Div代表历史上的一个时期，在页面的侧面的列中表示）。我的问题是，我不知道如何在图片中添加照片过渡，这样它就不会“跳转”到合适的位置，而不是给用户一种在新div（部分）的mouseover上轻松就位的体验。任何和所有的建议都会受到欢迎，我也尝试过CSS3的缓入-缓出效果，但运气不好，因为我需要它在悬停的div上从黑色背景缓入到图片中（我真的不知道如何在CSS3中创建悬停在中间div上的效果，但只影响两个侧面div）。任何帮助都将不胜感激

javascript jquery html css

Javascript 让我的图像轻松些我正在为这个组织设计一个网站，希望他们的图片显示在页面的侧面，中间的主要内容。当到达页面的新部分时，图片将发生变化，以反映正在讨论的新内容（因此，在本例中，每个Div代表历史上的一个时期，在页面的侧面的列中表示）。我的问题是，我不知道如何在图片中添加照片过渡，这样它就不会“跳转”到合适的位置，而不是给用户一种在新div（部分）的mouseover上轻松就位的体验。任何和所有的建议都会受到欢迎，我也尝试过CSS3的缓入-缓出效果，但运气不好，因为我需要它在悬停的div上从黑色背景缓入到图片中（我真的不知道如何在CSS3中创建悬停在中间div上的效果，但只影响两个侧面div）。任何帮助都将不胜感激,javascript,jquery,html,css,Javascript,Jquery,Html,Css,编辑：侧边的蓝色条表示图片的位置，以及用户将鼠标悬停在中间（橙色）分区上之前页面的启动方式。悬停时，蓝色条的变化如第二张图片所示。问题是，正如我们所知，这些图片只是“跳转”到合适的位置，而不是轻松地进入（更贴近眼睛） HTML/JS： <!DOCTYPE html> <html> <head> <title></title> <link href="https://maxcdn.bootstrapcdn.c

编辑：侧边的蓝色条表示图片的位置，以及用户将鼠标悬停在中间（橙色）分区上之前页面的启动方式。悬停时，蓝色条的变化如第二张图片所示。问题是，正如我们所知，这些图片只是“跳转”到合适的位置，而不是轻松地进入（更贴近眼睛）

HTML/JS：

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="practice.css" rel="stylesheet">
</head>

<body>
  <div id = "first" style = "background-color:blue">
    <div class = "col-sm-1" id = "left">
    </div>
    <div style = "background-color: orange;" class = "col-md-10" onmouseover="changeIn('left','right')" onmouseout="changeOut('left','right')">
    </div>
    <div class = "col-sm-1" id = "right">
    </div>
  </div>


  <div class = "second">
    <div class = "col-sm-1"></div>
    <div style = "background-color: green;" class = "col-md-10"></div>
    <div class = "col-sm-1"></div>
  </div>
</body>
</html>

<script type="text/javascript">

    function changeIn(spot1,spot2){
        var spot1 = spot1;
        var spot2 = spot2;
        document.getElementById(spot1).style.backgroundImage = "url('1.jpg')"
        document.getElementById(spot2).style.backgroundImage = "url('2.jpg')"
    }
    function changeOut(spot1,spot2){
        document.getElementById(spot1).style.backgroundImage = ""
        document.getElementById(spot2).style.backgroundImage = ""
    }
</script>


功能变更（spot1、spot2）{
var spot1=spot1；
var spot2=spot2；
document.getElementById（spot1.style.backgroundImage=“url（'1.jpg'）”
document.getElementById（spot2.style.backgroundImage=“url（'2.jpg'）”
}
功能转换（spot1、spot2）{
document.getElementById（spot1.style.backgroundImage=“”
document.getElementById（spot2.style.backgroundImage=“”
}

onMouseOut结果（页面如何开始）：

OnMouseOver结果（页面结束方式）：

尝试css过渡/变换效果，

或者写一个js脚本，ps如果你不知道怎么做，你怎么能写一个网站呢？

这不是一个完整的想法，但类似的东西应该可以很好地工作

block.addEventListener('mouseover', function () {
  parent.classList.add('transition-in');
  parent.classList.remove('transition-out');
});

这里有一个完整的例子：

Please make jsfiddleFiddle给我带来了麻烦，拍摄了一些截图，并在OP@muhammadumer中添加了更多的描述写一个网站（就像我以前做过很多次的那样）是很容易的部分（否则我不会拿薪水去做）。但是，没有一个团队，我一个人做这件事（而我通常不接触CSS，主要是使用平均堆栈）是让我绊倒的原因。就像我说的，我已经试过了过渡效果，但没有达到预期效果（就像我之前说过的），谢谢thoughHey@Dann，谢谢你的提琴。是的，这适用于颜色，但不适用于图像。这就是我在前面使用CSS3转换效果时遇到的问题well@JustinE.Samuels好的，我将研究jQuery中的

fadeIn（）

和

fadeOut（）

方法。谢谢@dann，我不知道为什么我之前没有考虑使用JQuery。现在很好，非常感谢