懸停上的菜單對其他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有不同的影響

回答

相關問題