Javascript 失去控制，我怎样才能达到这种效果？

主要的想法是在我的页面中获得一些动画效果。 第一，主要线索：

<ul class="institucional-menu">
            <li class="insmenu" id="Historia">Historia Fundacional</li>
            <li class="insmenu" id="Autoridades">Autoridades</li>
            <li class="insmenu" id="Balance">Balance</li>
        </ul>

我一整天都在试着先把潜水器移开，然后充电，最后还回那个潜水器。但我做不到。有什么建议吗

多谢各位

---

PD:“e.id”试图成为被“悬停”的元素的值（我不知道怎么说，如果这个动词存在），例如id=“Historia”，图像与每个

上的id值同名，这就是我失去控制的原因，我试图传递该值…

我在用户的点击而不是鼠标上方产生了相同的效果。同样的想法，如果我理解正确的话

我要做的是在container div（这里是imgcontainer）中给每个（这里是mouseover-able-li）菜单一个div。例如：

 <ul class="institucional-menu">
        <li class="insmenu" id="Historia">Historia Fundacional</li>
        <li class="insmenu" id="Autoridades">Autoridades</li>
        <li class="insmenu" id="Balance">Balance</li>
 </ul>
 <div id="imgcontainer">
    <div id="divHistoria><img src="..." /></div>
    <div id="divAuthoridades><img src="..." /></div>
    <div id="divBalance><img src="..." /></div>
 </div>

历史基金会
Autoridades
余额

你是说这个吗

$(document).ready(function(){
  $('.insmenu').mouseover(function(){
        var e = $(this);
        $('#imgcontainer').animate({
            left: '1024px',
            opacity: '1'
        },function(){
              $('#imgcontainer').attr("src",  e.attr('image'));
              console.log(e.attr('image'));
              $('#imgcontainer').animate({
                   left: '0px',
                   opacity: '1'
             });            
        });

    });
});

请注意，为了使左侧动画成为可能，项目不能是静态的（将其位置更改为绝对、相对或固定）

我喜欢这个效果，你能继续这个小提琴吗？我明白你的意思了？什么是
e.id
？你能把
#imgcontainer
的标记贴出来吗？对不起，我忘了删除它。我将立即纠正它。我正在尝试完成小提琴，但它没有触发动画方法，我不知道为什么这个版本会注意到元素不能是静态的，以动画“左”，这就是问题所在。我的图像是1024x768，所以我试图避免加载图像的孔集。但是，如何解决隐藏上一个div（带有动画二）并显示新的已单击div的问题呢？这是我的问题。这里的解释很复杂…我想我需要一个视频来试试这个。当然，您可以根据需要随意更改动画。这对加载时间没有帮助，但是关于交换所需的内容？我考虑了更多的加载时间：要么你需要在页面加载过程中提前加载所有图像，要么在图像滑过不同部分时加载。作为一个互联网速度较慢的人，我在前面的一个JSFIDDKS中感到非常困惑，因为图像交换了，但由于加载时间的原因，什么也没有显示，所以无论哪种方式，都应该包含某种加载指示器。它将立即运行，或每鼠标运行一次（除非img已兑现）。我想这取决于你的设置，但我个人建议先来一次。增加了一些花哨的加载器/启动屏幕的时间。图像消失了又回来了。这就是我理解你想要的，如果不让我知道的话。由于域原因，我更改了url图像设置。但是你应该能够保持你的方式，这个脚本移动了img，我可以看到它在用firbug调试，但是由于某种原因它没有像我说的那样，我改变了示例的url处理谢谢！它正在工作！但是你能解释一下这行是什么意思吗？：console.log（e.attr（'image'））；。我不知道我是否是一个糟糕的程序员，但我必须说我从来没有使用过它。只有在正确加载url时才进行调试。它类似于一个警报（“字符串”），但不太显眼，例如，您可以在firebug的控制台中看到它。您可以删除它；）顺便说一句如果你找到我的答案，我的满分是：P
$(document).ready(function(){
  $('.insmenu').mouseover(function(){
        var e = $(this);
        $('#imgcontainer').animate({
            left: '1024px',
            opacity: '1'
        },function(){
              $('#imgcontainer').attr("src",  e.attr('image'));
              console.log(e.attr('image'));
              $('#imgcontainer').animate({
                   left: '0px',
                   opacity: '1'
             });            
        });

    });
});