0

主要思想是在我的页面中获得一些效果动画 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 值一样

  • 这就是我失去控制的原因，我试图传递那个价值......

    • 4

    2 回答 2

    0

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

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

    于 2012-04-24T18:08:30.790 回答
    0

    你是这个意思吗？

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

    于 2012-04-24T18:12:11.730 回答