Question

Using Jquery (1.7.1) I am trying to make an image .fadeToggle on .hover()

The image is at the top of the page, it says “Concurso de Desfraces….”

The code works on this page: https://tienda.lirainwonderland.es

Why does it not work on this page?: http://lirainwonderland.es

I am able to make an alert work on .hover() so I am sure the problem is with .fadeToggle()

I have tried used firebug to find the source of this issue and there does seem to be a diference on the Stack tab of the Scripts panel when I break the script on line, not sure why though…

Here is the javascript:

$(document).ready(function () {
 $("#concurso").hover(function () { 
   $('#concurso2').fadeToggle("slow", "linear");            
});
});

Here is the CSS:

#concurso {
 position: relative;
}

#concurso2 {
    display: none;
    position: absolute;
    top: -240px;
    left: 0;
}

Here is the HTML:

<a id="concurso" href="">
  <img id="concurso1" src="/images/consurso_de_disfraces_carnival_2013_rojo_inico.png" alt="Concurso de Disfraces Lira in Wonderland 2013" />
  <img id="concurso2" src="/images/consurso_de_disfraces_carnival_2013_rosa_inico.png" alt="Concurso de Disfraces Lira in Wonderland 2013" />
</a>

Answer 1

When you just run the code, you’ll see an error

$('#concurso2').fadeToggle("slow", "linear");

try running it on http://lirainwonderland.es/

this means you have different version on your 2 pages

jQuery.fn.jquery; // checks jQuery version

but then that’s not the problem, it seems your $() is not jQuery, maybe you have other script like mootools, prototype, etc there

instead of $, you could use jQuery and it worked when I tried it.

jQuery('#concurso2').fadeToggle("slow", "linear");