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

我整天都试图先移开潜水，然后充电图像，最后返回那个div。但我不能。有什么建议？

非常感谢！

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

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

Answer 1

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

我必须做的是在容器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交换（尽管如果有很多非常大的图像，这可能是一个问题）。

Answer 2

你是说这个吗？

$(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/

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

2 个答案: