Fade In/Out between two divs : The Official Microsoft ASP.NET Forums

Reply

momer40

Member

34 Points

66 Posts

Fade In/Out between two divs

Mar 06, 2012 01:04 PM|LINK

Hi,

I have got two slogans on my website inside the div and i want to fade them In/out continuesly on the home page. First it will show the div one and then after few seconds it should show the div two and then div one and two and so on.

How can this be done with jquery?

Reply

bruce (sqlwo...

All-Star

36882 Points

5451 Posts

Re: Fade In/Out between two divs

Mar 06, 2012 01:36 PM|LINK

yes, see animate().

bruce (sqlwork.com)

Reply

kedarrkulkar...

All-Star

34545 Points

5554 Posts

Re: Fade In/Out between two divs

Mar 06, 2012 01:36 PM|LINK

i craeted this sample for u... using jquery

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
setTimeout(Animate,5000)
var flag;
function Animate()
{
  if(flag!="message2")
  {
    $("#message2").fadeOut(0);
    $("#message1").fadeIn(2000);
    flag="message2"
  }
  else
  {
    $("#message1").fadeOut(0);
    $("#message2").fadeIn(2000);
    flag="message1"
  }
setTimeout(Animate,5000)
}

function Init()
{
$("#message2").fadeOut(0);
}
</script>
</head>
<body onload="Init();">
<div style="width:300px; height:200px;background-color:Gray">
  <div id="message1" style="width:300px; height:200px;background-color:Gray;font-size:50">
       Message1
  </div>
  <div id="message2" style="width:300px; height:200px;background-color:Gray;font-size:50">
     Message2
  </div>
</div>
</body>
</html>

the setTimeOut function is like a timer function of javascript... which invokes first parameter name as function and second parameter is interval after which function to call... (in miliseconds.... so 5000 miliseconds = 5 seconds)

then use jQuery fadein and fadeout functions to fadein one div and fadeout another

hope this helps...

Cheers!
KK

Please mark as Answer if post helps in resolving your issue
My Site

Reply

Vipindas

Contributor

5514 Points

810 Posts

Re: Fade In/Out between two divs

Mar 06, 2012 01:38 PM|LINK

http://medienfreunde.com/lab/innerfade/

Hope it helps...

Please remember to mark as answer if it helps you

Reply

asteranup

All-Star

30184 Points

4906 Posts

Re: Fade In/Out between two divs

Mar 07, 2012 11:53 AM|LINK

Hi,

You some how need to loop animation. You can check this plugin-

http://www.irengba.com/codewell/

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Edited by asteranup on Mar 07, 2012 11:54 AM

Reply

rajsedhain

Contributor

4181 Points

1041 Posts

Re: Fade In/Out between two divs

Mar 07, 2012 08:25 PM|LINK

see this great article with code example:

http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation

Thanks,
Raj Sedhain

Reply

momer40

Member

34 Points

66 Posts

Re: Fade In/Out between two divs

Mar 08, 2012 01:46 PM|LINK

Here is the code which is not working;

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - demo</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.3.js'></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>

</style>

<script type='text/javascript'>//<![CDATA[
//$(window).load(function(){
//var len = $("#news div").length;
//$("#news div:gt(0)").hide();
//var counter = 0;
//var start = 1;
//function changeDiv() {
//    $("#news div").eq(counter).show().siblings("div").hide();
//    counter++;
//    if(counter === len) {
//        counter = 0;
//    }
//}
//
//var i = setInterval(changeDiv, 1000);
//});//]]>

function imageOneFade()
{
$('#slog1').fadeIn(2000,
function()
{ setTimeout("$('#slog1').fadeOut(2500); imageTwoFade();",6000); });
}

function imageTwoFade()
{
$('#slog2').fadeIn(2000,
function(){ setTimeout("$('#slog2').fadeOut(2500); imageOneFade();",6000); });
}

$(document).ready(function()
{imageOneFade(); });

</script>

</head>
<body onload="Init();">

<table cellspacing="10" cellpadding="0">
        <tr>
          <td style="width:400px; padding:0 0 0 65px; color:#38a0d5; height:172px; vertical-align:top; ">
              <div id="slogs">
              <div id="slog1">
                  <p style="color:#38a0d5; font-size:16px; font-weight:bolder; text-align:right;">A trusted and proven provider of global Database.</p>
              </div>

              <div id="slog2">
               <p style="color:white; font-size:16px; font-weight:bolder; text-align:center; position: relative;">
                Life & text here <br /> built upon <br /> local Knowlege
                </p>
              </div>
              </div>
          </td>
        </tr>
    </table>

</body>

</html>

Reply

Vipindas

Contributor

5514 Points

810 Posts

Re: Fade In/Out between two divs

Mar 08, 2012 01:55 PM|LINK

Remove onload="Init();" from <body> tag

<body>
.....
</body>

Please remember to mark as answer if it helps you

Reply

momer40

Member

34 Points

66 Posts

Re: Fade In/Out between two divs

Mar 08, 2012 02:53 PM|LINK

won't make any difference.

Please try this code and see if this can be correcred. I want to show slog1 first and then slog2. Not both together.

<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<TITLE>FadeIn FadeOut Div using jQuery - DEMO</TITLE>
<style>
body, input{
font-family: Calibri, Arial;
}

#sometext {
width: 150px;
height: 150px;
padding: 10px;
border:1px solid black;
background-color: #FFEE88;
}
</style>
</HEAD>

<body>

<table cellspacing="10" cellpadding="0">
        <tr>
          <td style="width:400px; padding:0 0 0 65px; color:#38a0d5; height:172px; vertical-align:top; ">
              <div id="slogs">
              <div id="slog1">
                  <p style="color:#38a0d5; font-size:16px; font-weight:bolder; text-align:right;">A proven provider of database.</p>
              </div>

              <div id="slog2">
               <p style="color:black; font-size:16px; font-weight:bolder; text-align:center; position: relative;">
                Global quality <br /> built upon <br /> expertise
                </p>
              </div>
              </div>
          </td>
        </tr>
    </table>

</body>
<script type='text/javascript'>

$(document).ready(function()
{fadeIn_(); })

function fadeIn_()
{
$('#slog1').fadeIn(2000,
function()
{ setTimeout("$('#slog1').fadeOut(2500); fadeOut_();",6000);})
}

function fadeOut_()
{
$('#slog2').fadeIn(2000,
function(){ setTimeout("$('#slog2').fadeOut(2500); fadeIn_();",6000);})

}
</script>
</HTML>

Reply

kedarrkulkar...

All-Star

34545 Points

5554 Posts

Re: Fade In/Out between two divs

Mar 08, 2012 02:58 PM|LINK

momer40
<table cellspacing="10" cellpadding="0">
        <tr>
          <td style="width:400px; padding:0 0 0 65px; color:#38a0d5; height:172px; vertical-align:top; ">
              <div id="slogs">
              <div id="slog1">
                  <p style="color:#38a0d5; font-size:16px; font-weight:bolder; text-align:right;">A trusted and proven provider of global Database.</p>
              </div>

              <div id="slog2">
               <p style="color:white; font-size:16px; font-weight:bolder; text-align:center; position: relative;">
                Life & text here <br /> built upon <br /> local Knowlege
                </p>
              </div>
              </div>
          </td>
        </tr>
    </table>

if u run u r posted code... it dosent show second message at all...

and the reason is... in slog2 div, color of tag <p> is set to white... and it dosent display on white background

this should be changed to some other color.... like this

<p style="color:white; #38a0d5; font-size ...

also, the function ImageOneFade and ImageTwoFade needs to be changed.... else it displayes second slog before 1st gets time to displappear... and for some momet, both slogs become visibiel.... if u r ok with making one slog suddenly go off and second to display then, change the functions as

function imageOneFade()
{
$('#slog2').fadeOut(0);
$('#slog1').fadeIn(2000,
function()
{ setTimeout("imageTwoFade();",6000); });
}

function imageTwoFade()
{
$('#slog1').fadeOut(0);
$('#slog2').fadeIn(2000,
function()
{ setTimeout("imageOneFade();",6000); });
}

if u strictly want the slow fadein/fadeout effect, then u need to adjust the timing of fadeout of first slog and then only second slog start appearing...

hope this helps...

Cheers!
KK

Please mark as Answer if post helps in resolving your issue
My Site

Marked as answer by BU XI - MSFT on Mar 13, 2012 04:06 AM

Fade In/Out between two divs RSS

13 replies

momer40

Fade In/Out between two divs

bruce (sqlwo...

Re: Fade In/Out between two divs

kedarrkulkar...

Re: Fade In/Out between two divs

Vipindas

Re: Fade In/Out between two divs

asteranup

Re: Fade In/Out between two divs

rajsedhain

Re: Fade In/Out between two divs

momer40

Re: Fade In/Out between two divs

Vipindas

Re: Fade In/Out between two divs

momer40

Re: Fade In/Out between two divs

kedarrkulkar...

Re: Fade In/Out between two divs

momer40

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft