悬停上的菜单对其他div有不同的影响

我有一个div中有5个元素的菜单，每个元素有180px的宽度。而且我在这个div的外面有一条线，它有一个必须移动的图像取决于哪个元素被徘徊。我想这样做：5个元素与Ids从“＃fxmenu_1”到“＃fxmenu_5。我必须声明一个变量的ID号徘徊，并移动#img与此规则在JavaScript（JQuery中）：悬停上的菜单对其他div有不同的影响

保证金左：180像素，从1至5

（次＃fxmenu_ $ I）我知道代码的allmost一切，但变量$我在我的代码最终不工作，我认为必须写出更好的东西，比如var = $“fxmenu_ $ i”

这是一个代码的例子，在php中有更多，但是我可以告诉你。

<div id="pmenu"> 
<ul id="bmenul"> 
      <li> 
       <a class="brand" id="fxmenu1_" href="/"><img src="/logomenu.png" />LOGO</a> 
      </li> 
       <li> 
       <a id="fxmenu_2" href="/team" title="team">The team</a> 
       </li> 
       <li> 
       <a id="fxmenu_3" href="/services" title="Servicios">Services</a> 
       </li> 
       <li> 
       <a id="fxmenu_4" href="/projects" title="Proyectos">Projects</a> 
       </li> 
       <li> 
       <a id="fxmenu_5" href="/contact" title="Contacto">Contact</a> 
       </li> 
     </ul> 
<div id="bar"> 
    <img id="img" src="/efect.png" /> 
</div> 
</div>

与CSS是这样的链接http://jsfiddle.net/rzJMv/

这是jQuery的，但我想带回到正常的一切，当我停止徘徊，或者如果我将鼠标悬停等元素移动到这个新的起点。

$(document).ready(function(){ 
var id; 
    $('#fxmenu_'+id+':not(.totalactive)').hover(function(){ 
     $('#img').animate({"marginTop": "-70px"},1000, function(){ 
      $('#img').animate({"marginLeft":+(180*id)+"px"},1000, function(){ 
       $('#img').animate({"marginTop": "-90px"},1000); 
       }); 
     }); 
    }); 
});

http://jsfiddle.net/rzJMv/1/

来源

2012-12-02 Ignacio Bustos

没有mark-这个问题不能回答，请显示你的html。 –

我有这个链接，试图向你展示它是或多或少http://jsfiddle.net/rzJMv/ –

你可能还需要在jsfiddle – greener

将不得不多看你的代码，以确保但通常变量在JavaScript中使用像这样'margin-left:'+(180*i)+'px'

在PHP的情况下，'margin-left:'+(180*<?php echo $i; ?>)+'px'

来源

2012-12-02 20:26:30 greener

我认为这很容易，但我怎么可以从变量$我从div＃fxmenu_3（例如） –

即使用jQuery Css，以及jQuery Animate的代码是什么？ –

最初，你的问题是关于JavaScript中的PHP变量。也许你应该为有生命的问题开始一个新的问题。你也可以看看'hover'的文档：http：//api.jquery.com/hover/ – greener

悬停上的菜单对其他div有不同的影响

回答

相关问题