homepage Welcome to WebmasterWorld Guest from 54.146.175.204
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Trying to fade in with jquery javascript
cmendla

10+ Year Member



 
Msg#: 4625569 posted 9:32 pm on Nov 23, 2013 (gmt 0)

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

10+ Year Member



 
Msg#: 4625569 posted 9:41 pm on Nov 23, 2013 (gmt 0)

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

10+ Year Member



 
Msg#: 4625569 posted 6:28 am on Nov 24, 2013 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4625569 posted 1:17 am on Nov 29, 2013 (gmt 0)

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

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4625569 posted 1:59 am on Nov 29, 2013 (gmt 0)

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

10+ Year Member



 
Msg#: 4625569 posted 5:46 am on Nov 29, 2013 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4625569 posted 6:24 am on Nov 29, 2013 (gmt 0)

$(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

10+ Year Member



 
Msg#: 4625569 posted 7:43 am on Nov 29, 2013 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4625569 posted 8:45 am on Nov 29, 2013 (gmt 0)

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

10+ Year Member



 
Msg#: 4625569 posted 8:25 pm on Dec 2, 2013 (gmt 0)

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

10+ Year Member



 
Msg#: 4625569 posted 11:40 pm on Dec 2, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved