Home/ Questions/Q 720089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T05:43:07+00:00

I’ve been playing with jQuery in an ASP.NET project and am finding some odd

  • 0

I’ve been playing with jQuery in an ASP.NET project and am finding some odd behavior with the .fadeIn() and fadeOut() functions. In the below example, a click on the button (ID Button1) is supposed to cause both the span of text with ID Label1 and the the button with the ID TextBox1 to do the following things:

  • Fade Out
  • Change the text of both the text box and the span of text to be You clicked the button
  • Fade In

Based on the browser I’m using, I get 3 different scenarios, and each element functions differently in each situation. Here’s what happens when I actually click the button:

TextBox1:

  • In IE8, the text box fades out, changes text, then fades back in
  • In IE8 Compatibility View, the text box fades out, changes text, then fades back in. However, the text in the box looks a little different than before the button was clicked.
  • In FireFox 3.5.8, the text box doesn’t fade out (but it does “pause” for the amount of time the fade would take), does change the text, then seems to “pause” again where it would be fading in.

Label1:

  • In IE8, the label doesn’t fade out (but it does “pause” for the amount of time the fade would take), does change the text, then seems to “pause” again where it would be fading in.
  • In IE8 Compatibility View, the label does fade out, change text, and fades back in, but the text looks a little different than before the button was clicked.
  • In FireFox 3.5.8, the label doesn’t fade out (but it does “pause” for the amount of time the fade would take), does change the text, then seems to “pause” again where it would be fading in.

Two questions:

  1. What’s going in to make each element to behave differently in different browsers?
  2. Is there a better way to get the functionality I’m looking for across multiple platforms?

Here’s the source code of the file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>

</title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#Button1").click(function(event) {
          $("#Label1").fadeOut("slow", function() {
            $(this).text("You clicked the button");            
            $(this).fadeIn("slow");
          });
          $("#TextBox1").fadeOut("slow", function() {
            $(this).val("You clicked the button").fadeIn("slow");            
            $(this).fadeIn("slow");
          });
          event.preventDefault();
        });
        $("a").click(function(event) {
          $("#Label1").text("You clicked the link");
          $("#TextBox1").val("You clicked the link");
          event.preventDefault();
        });
      });

    </script>

</head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTQwMjM5ODcyZGT6OfedWuFhLrSUyp+gwkCEueddvg==" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwK56uWtBwLs0bLrBgKM54rGBotkyyA5RRsPBGNaPTPCe7F5ARwv" />
</div>
    <div>

      <span id="Label1" style="color:#009900;">Type Something Here:</span>
&nbsp;
      <a href="http://www.google.com">This is a test Link</a>  
      <input name="TextBox1" type="text" value="test" id="TextBox1" style="width:258px;" />
      <br />
      <br />
      <input type="submit" name="Button1" value="Button" id="Button1" />

    </div>
    </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I experienced the same problem. In order to fix it, I tried this and it worked.

    Instead of:

    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    I used:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

    Try using a different version or getting it from a different source if you really need the Visual Studio version.

    • 0