AJAX

html to make images different fade in and out

•

Join Date: Jun 2009

Posts: 2

Reputation: postal07 is an unknown quantity at this point

Solved Threads: 0

postal07

Offline

Newbie Poster

html to make images different fade in and out

Jul 2nd, 2009

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

•

Join Date: Jul 2009

Posts: 13

Reputation: Bojero is an unknown quantity at this point

Solved Threads: 3

Bojero

Offline

Newbie Poster

Re: html to make images different fade in and out

Jul 3rd, 2009

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.

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<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>
<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:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
        $(function(){
            $("div").click(function() {
                $("div").fadeOut("slow", function() {
                    $("div").fadeIn("slow");
                });
            });
        });
        $(function(){
            $("div").click(function() {
                $("div").fadeOut("slow", function() {
                    $("div").fadeIn("slow");
                });
            });
        });

Last edited by Bojero; Jul 3rd, 2009 at 4:25 am.

•

Join Date: May 2009

Posts: 10

Reputation: MattTheHat is an unknown quantity at this point

Solved Threads: 0

MattTheHat MattTheHat is offline

Offline

Newbie Poster

Re: html to make images different fade in and out

Jul 3rd, 2009

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).

•

Join Date: Jul 2009

Posts: 3

Reputation: rangminank is an unknown quantity at this point

Solved Threads: 0

rangminank rangminank is offline

Offline

Newbie Poster

Re: html to make images different fade in and out

Jul 3rd, 2009

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

<FAKE SIGNATURE>

Last edited by peter_budo; Jul 4th, 2009 at 6:07 am. Reason: Keep It On The Site - Do not manually post "fake" signatures in your posts. Instead, you may create a sitewide signature within the user control panel.