javascript - 失去控制，我怎么能达到这种效果？

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 会根据每个选项移动并显示图像，直到下一次用户将鼠标移动到其他不同的选项上时图像才会出现。在第一个 Action 中(第一个用户在某个选项上移动)没问题，问题从第二个和更高的 Action 开始，因为前面的 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'
        });
        });
    });

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

非常感谢!

PD:“e.id”试图成为已经“悬停”的元素的值(我不知道怎么说，如果这个动词存在)例如 id="Historia"，图像具有相同的名称，例如每个

这就是我失去控制的原因，我试图传递该值...

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/