Jquery .fadeToggle() works on one page, doesn’t on another (same code)

4 Views

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….”

Read More

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>
Post Views: 4

Related posts

Leave a Reply

1 comment

  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");