954,168 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

html to make images different fade in and out

I have been trying this also and can,t get it to work thought i had the right code.Please help

postal07
Newbie Poster
2 posts since Jun 2009
Reputation Points: 10
Solved Threads: 0
 

If you want fading effects for various elements on an html page then the jQuery javascript library is for you. The following example fades out and then fades back in all divs on a page that are clicked.

<html>
	<head>
    		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
        	$(function(){
            		$("div").click(function() {
                		$("div").fadeOut("slow", function() {
                    		$("div").fadeIn("slow");
                		});
            		});
        	});
        	</script>
	</head>

	<body>
		<div style="width: 400px; height: 400px; background: #CC0000; border: #000000"></div>
	</body>
</html>


Here's the javascript bit on it's own:

$(function(){
            $("div").click(function() {
                $("div").fadeOut("slow", function() {
                    $("div").fadeIn("slow");
                });
            });
        });
Bojero
Newbie Poster
13 posts since Jul 2009
Reputation Points: 10
Solved Threads: 3
 

Of course it would help to know more precisely what your doing but in lieu of that there are some CSS3 things that will help specifically the new 'opacity' property.

However you will need to create several versions (one for each browser) because CSS3 is not properly out yet.
A cascading try/catch system should do the trick.

Or you could just use Jquery (I like to code everything myself then I know where I am with it).

MattTheHat
Newbie Poster
10 posts since May 2009
Reputation Points: 10
Solved Threads: 0
 

Thanks for u info...
i think i can use it for my picture somedays....

rangminank
Newbie Poster
3 posts since Jul 2009
Reputation Points: 10
Solved Threads: 0
 

Actually, look at the innerfade library for jQuery for out-of the box functionality...
http://medienfreunde.com/lab/innerfade/

Cheering You Up!

codejoust
Junior Poster
180 posts since Jul 2009
Reputation Points: 18
Solved Threads: 21
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You