Databases
StackOverflow2013
Postsdbo
POmenu on hover make different effect on other div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmenu on hover make different effect on other div
    text
    copied!<p>I have a menu in a div with 5 elements that has 180px of width each element. And I have a line under this, outside this div, that has an image that has to move depend on which element is hovered.</p> <p>I do this: 5 element with Ids from "#fxmenu_1" to "#fxmenu_5. i have to declare a variable for the number of the id hovered, and move #img with this rule in javascript (Jquery):</p> <blockquote> <p>margin-left:180px (times #fxmenu_$i) from 1 to 5</p> </blockquote> <p>I know allmost everything of the code, but the variable $i doesnt work at the end with my code, and i think there has to be something better to write. like a var=$"fxmenu_$i"</p> <p>This is an Example of the code, there is more in php, but is all i can show you.</p> <pre><code> &lt;div id="pmenu"&gt; &lt;ul id="bmenul"&gt; &lt;li&gt; &lt;a class="brand" id="fxmenu1_" href="/"&gt;&lt;img src="/logomenu.png" /&gt;LOGO&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a id="fxmenu_2" href="/team" title="team"&gt;The team&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a id="fxmenu_3" href="/services" title="Servicios"&gt;Services&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a id="fxmenu_4" href="/projects" title="Proyectos"&gt;Projects&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a id="fxmenu_5" href="/contact" title="Contacto"&gt;Contact&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div id="bar"&gt; &lt;img id="img" src="/efect.png" /&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>with the css is like this link <a href="http://jsfiddle.net/rzJMv/" rel="nofollow">http://jsfiddle.net/rzJMv/</a></p> <p>This is with the jquery but i want to bring back to normal everything when i stop hovering, or if i hover other element to move to this new point.</p> <pre><code>$(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); }); }); }); }); </code></pre> <p><a href="http://jsfiddle.net/rzJMv/1/" rel="nofollow">http://jsfiddle.net/rzJMv/1/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload