jQuery image fade not working for unknown reason...? - 【StackMirror】|jquery|html|opacity|fade

Just when I thought I was done for the night, another issue is keeping me awake.

It appears that somehow I have broken the fade I was using on my thumbnails. If you go here: http://ftfranes.com/mliad2/ When you hover your mouse of the thumbnails, it should fade up.

To give you an idea, this is a working version of the script: http://nothingcantuochme.com/stackoverflow.php#download_page As you can see, the hover works fine with the fade. And please mind the mess on this one, I just added it to demonstrate.

Is there anyone that can kindly assist me in solving this issue? I would lie if I told you that I wasn't completely lost.

2012-04-03 23:08
by Henrik Petterson

That script is Sparta. Could you provide the code portion that should be working - keystorm 2012-04-03 23:15

you need to provide specific code that's not working, as well as the links -> no one wants to wade through an entire script - ahren 2012-04-03 23:16

The issue here is that I do not know which part of the code that is not making it to work, that is why I am directing to the website itself. I did not alter the code that was relating to the fade to make it go broken. My only guess is that someone else in the source is making it not run... - Henrik Petterson 2012-04-03 23:19

There is a lot going on in these pages! It could be any of the code stepping on any other part of the code, I'm afraid. Try splitting the pages so that one handles the fade animation, another page handles the scrollto, and so on. You will probably find that piece that overrides the desired effect - uotonyh 2012-04-03 23:29

$(function() {
    // JUST CHANGE THE SELECTOR
    // MAY NEED TO REFINE IF IT AFFECTS OTHER ELEMENTS
    $('.image > a').each(function() {
    /*$(this).append('<div style="position:absolute; top:5px; left:5px; width:200px; height:150px; background:red;"></div>');*/
        $(this).hover(function(){
            $(this).find('img').stop().animate({
                opacity: 0.8
            })
        },function(){

            $(this).find('img').stop().animate({
                opacity: 1
            })
        });
    });
});

2012-04-03 23:28
by cha55son

Can you please elaborate on your answer? What do I adjust with this code - Henrik Petterson 2012-04-03 23:37

Got it, cheers buddy - Henrik Petterson 2012-04-03 23:41

In your script.js file, where I pulled this snippet, the original selector for that each function is "a.zoom, a.vimeo, a.youtube, a.vimeofinal, a.vimeonothingcan, a.vimeothemob, a.vimeonothingcanteaser, a.vimeoforevigt, a.vimeoskellhell, a.vimeoskellhell2, a.vimeosneblind, a.vimeoetttva, a.vimeohastutan". Instead of doing the above just change the selector to ".image > a". Its cleaner and you dont have to add a new selector every time you want to add a new image - cha55son 2012-04-03 23:44

That is awesome, cheers, I added yours as the correct answer : - Henrik Petterson 2012-04-03 23:48

My idea, Javascript is stopped in middle of the processing. Check your debug console.

Error: uncaught exception: Error: Permission denied for http://www.facebook.com to get property Proxy.InstallTrigger

If your fadeout script is after this code, the script will not work.

2012-04-03 23:26
by caoglish

The fade effect should be executed before the facebook code, therefore it should work if I am not mistaken? Is there anyway that you can confirm your theory - Henrik Petterson 2012-04-03 23:29

Okay, as far as I can tell, the issue is here.

<a href="http://vimeo.com/24849072" class="vimeo_nothingcan"> <img alt="" src="images/nothingcan.png"> </a>

The classes of your link are incorrectly named. In the script.js file, it specifies that the class must be vimeo, youtube zoom etc... You need to rename your class to "vimeo nothingcan" without the underscore.

Check line 680 of script.js

The function you mentioned in a comment, is set to the event "onclick." You need to edit the function on 680 that is bound to "hover."

2012-04-03 23:30
by Josh Infiesto

No that is incorrect, if you make a search in the script.js file, you will find the "vimeo_nothingcan". Any other ideas - Henrik Petterson 2012-04-03 23:33

I just edited my answer. Check line 680 of your script - Josh Infiesto 2012-04-03 23:34

Can you kindly tell me what the line contains so that I can make a search? My text-editor does not display line numbers I'm afraid.. - Henrik Petterson 2012-04-03 23:35

In his answer, cha55son is referring to the same function. He made the selector more general - Josh Infiesto 2012-04-03 23:36

Search for: $(function() { $('a.zoom, a.vimeo, a.youtube, a.vimeo_final').each(function() { /$(this).append('
');/ $(this).hover(function(){ $(this).find('img').stop().animate({ opacity: 0.8 } - Josh Infiesto 2012-04-03 23:36

Got it! Cheers guys, it works now : - Henrik Petterson 2012-04-03 23:41

Selector in 678 of script.js:

$('a.zoom, a.vimeo, a.youtube, a.vimeo_final')

But in your page, the class is a.vimeo_nothingcan

Try adding: "a.vimeo_nothingcan" to the selector in that line:

$('a.zoom, a.vimeo, a.youtube, a.vimeo_final,a.vimeo_nothingcan')

2012-04-03 23:46
by caoglish