Trying to fade in with jquery javascript

[cmendla]

I am trying to get a rollover effect to fade in on rollover..

Currently I am using the following function

 function slice5() {
document.circle.src = Image5.src;
return true;
}

That works.

Is there any way to easily modify that if you are running jquery (it's on a joomla site but that should not matter)

I've tried a couple of variations such as the following but haven't hit the right one yet

 

 function slice6() {
      document.circle.src = (imgage6.src).fadeIn(200);
      return true;
} 

I'd appreciate any thoughts.

[cmendla]

I should add that the xmap that calls for the slice is

 
<area shape="poly" coords="395,276,476,139,418,117,374,114,316,121,275,138,353,276,375,271" alt="example" href="/images/slice-6.jpg" onmouseover="slice6()" onmouseout="original()">

[cmendla]

In my original post, when I said "It works" I meant that the rollover works in the sense that it pops a message up but it does not have any fade in effects.

[daveVk]

document.circle.src = (imgage6.src).fadeIn(200);

needs to be

document.circle.src = imgage6.src;
$(document.circle).hide().fadeIn(200);

you may not need the .hide() if previously hidden

[JD_Toims]

Also, fadeIn(200) is 200 milliseconds, so it's such a fast fade [1/5 of a second] it might be unnoticed. The default for fadeIn('slow'); is 500 or 1/2 a second -- Personally, I usually just go with 'slow', but sometimes when it's necessary I'll start at 1200 or so and "test/speed it up" until it's not too slow for what I'm wanting. ~750 is usually the slowest I end up with.

[cmendla]

I seem to be running into a problem where only one line of the function gets executed.

  function slice6() {
document.circle.src = Image6.src;
           $(document.circle).fadeOut(1500); 
                    }

Shows the slice with no effects

  function slice6() {
document.circle.src = Image6.src;
           $(document.circle).hide()fadeIn(1500); 
                    }

Causes the entire image to disappear when the slice is hovered

  function slice6() {
document.circle.src = Image6.src;
            $(document.circle).hide();
 document.circle.src = Image6.src;
            $(document.circle).show().fadeIn(900);
 document.circle.src = Image2.src;
                    }

Shows Slice6 with no effects...

I would think that it would end up showing slice 2?

thanks

chris

[daveVk]

$(document.circle).hide()fadeIn(1500);

make sure to include '.'

$(document.circle).hide().fadeIn(1500);

Make sure javascript error reporting is turned on in browser

[cmendla]

Thanks for the help folks.. I'm getting closer.

I'm going to wrap up for tonight and take a look at this tomorrow

I think I'm making a fundamental mistake. I haven't done a lot of coding recenty

I seem to remember that functions generally return a value. I'm calling the function with an onmouseover command.

Since I'm trying to animate this which will probably require several lines of code, I dont thing a function can do that.

What I'll need to figure out is how to get the onmouse or even the map statement to execute a series of lines of code.

thanks

chris

[daveVk]

Since I'm trying to animate this which will probably require several lines of code, I dont thing a function can do that.

That is NOT the problem.

Check if this bit works

function slice6() {
// document.circle.src = Image6.src;
$(document.circle).hide().fadeIn(1500);
}

[cmendla]

I think there is another problem. I took some code out of w3schools and some that was on JSFiddle that I knew worked for animations and used that on my page. It didn't work.

I ran code to check the version and it reports jquery is loaded.

I put the code to turn effects on (jQuery.fx.off = false;) and that didn't help either

So, I can take code from w3schools showing the fadein/fadeout functions and paste it into my page and the animation doesn't work.

Is there anything like the phpinfo command that would show all of my effective settings?

I am running jquery easy on the site

So, the code that the other posters provided was almost certainly correct. The problem is somewhere in my joomla/jquery configuration.

thanks

chris

[cmendla]

I found that Jquery easy needed to be configured in the advanced section so that it would load the jquery ui.

it's working to a point. I just need to work on the transitions.