失控，我怎么能达到这个效果？

Question

主要想法是在我的页面中获得一些效果动画 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 会根据每个选项移动并显示图像，直到下一次用户将鼠标移到其他不同选项上为止。在第一个动作（第一个用户在某个选项上移动）是可以的，问题从第二个和更高的动作开始，因为之前的 IMG 在那里，所以我需要将 div 向右移动（创建它消失的效果取另一个 img) 并将其从右向左返回，新的 img 在里面充电。

这是我的 Javascript：

jQuery('.insmenu').mouseover(function(){
        jQuery('#imgcontainer').animate({
            left: '1024px',
            opacity: '1'
        });
        jQuery('#imgcontainer').queue(function(){
            jQuery('#imgcontainer').attr("src", e.id+'.jpg');
            jQuery('#imgcontainer').animate({
            left: '0px',
            opacity: '1'
        });
        });
    });

我整天都在尝试首先移开潜水，然后充电图像，最后返回那个潜水。但我不能。有什么推荐吗？

非常感谢！

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

上的 ID 值具有相同的名称，这就是我失去控制的原因，我试图传递该值...

Answer 1

你是这个意思吗？

$(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'
             });            
        });

    });
});

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

http://jsfiddle.net/KLrVg/22/

Answer 2

我对用户的点击而不是鼠标悬停做出了同样的效果。同样的想法，如果我理解正确的话。

我必须做的是在容器 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>

然后隐藏/显示/动画与菜单项同名的 div 是一件简单的事情。不需要 src 交换（尽管如果有很多非常大的图像，这可能是个问题）。