/    Sign up×
Community /Pin to ProfileBookmark

problem with thumbnail hover fade

Copy linkTweet thisAlerts:
Mar 01.2011

I’m using the following code to fade my thumbnails on mouseover, and it works, but if you run your mouse back and forth several times, they will keep fading on and off and on and off and so on until they catch up with however many times you swiped your mouse pointer over them. It can get ridiculous. Does anybody know a way to make it not do that?

[CODE]<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>

$(document).ready(function(){
$(“.thumbs img”).fadeTo(“slow”, 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

$(“.thumbs img”).hover(function(){
$(this).fadeTo(“slow”, 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(“slow”, 0.6); // This should set the opacity back to 60% on mouseout
});
});

</script> [/CODE]

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaMar 01.2011 —  Does anybody know a way to make it not do that?
[/quote]

yep, but why are you using jQuery? It's easier for me to do it with plain javascript.
Copy linkTweet thisAlerts:
@AliasJaneDoeauthorMar 01.2011 — yep, but why are you using jQuery? It's easier for me to do it with plain javascript.[/QUOTE]

Care to share the plain javascript that works for you?
Copy linkTweet thisAlerts:
@tirnaMar 01.2011 — I asked a simple question and you chose to not answer, which is your choice to make. But it's also my choice to then not answer yours.

Good luck ?
Copy linkTweet thisAlerts:
@AliasJaneDoeauthorMar 01.2011 — I asked a simple question and you chose to not answer, which is your choice to make. But it's also my choice to then not answer yours.

Good luck ?[/QUOTE]

I wasn't meaning to not answer you. I'm using jQuery instead of plain javascript because I don't know how to do it with plain javascript, which is why I asked what code it is that works for you. If plain javascript is better, I'd be very grateful if you'd teach me how to do it that way.
Copy linkTweet thisAlerts:
@tirnaMar 01.2011 — I'm using jQuery instead of plain javascript because I don't know how to do it with plain javascript, which is why I asked what code it is that works for you. If plain javascript is better, I'd be very grateful if you'd teach me how to do it that way.[/quote]

In that case, my suggestion would be to learn at least the basics of javascript first before playing with jQuery. I see too many people starting out trying to take the jQuery shortcut without knowing the basics of javascript first. jQuery is a javascript framework and there is nothing you can do with jQuery that you cannot do with plain javascript. jQuery simply saves time, in most cases if you know what you are doing, because someone else has already written the bulk of the code for you.

If you're trying to rely on jQuery without knowing javascript first I suspect you, like most others trying the same thing, will most probably end up spending quite a lot of time in forums like this looking for someone to help you when you get stuck.

If you genuinely want to learn javascript a good place to start is w3schools
Copy linkTweet thisAlerts:
@Calvert_TripesiMar 01.2011 — I'm using the following code to fade my thumbnails on mouseover, [/QUOTE]Why present a set of foggy images? You could try it the other way around.
Copy linkTweet thisAlerts:
@AliasJaneDoeauthorMar 01.2011 — Why present a set of foggy images? You could try it the other way around.[/QUOTE]

Just personal preference. I like it better with them "foggy" to start. But thanks for sharing the link.
×

Success!

Help @AliasJaneDoe spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...