Почему jQuery fadeIn () и fadeOut () выглядят странно в этом примере? - PullRequest
Новая
       16

Почему jQuery fadeIn () и fadeOut () выглядят странно в этом примере?

0 голосов
/ 07 апреля 2010

Я играл с jQuery в проекте ASP.NET и обнаружил странное поведение с функциями .fadeIn() и fadeOut(). В приведенном ниже примере нажатие кнопки (ID Button1) должно привести к тому, что как диапазон текста с идентификатором Label1, так и кнопка с идентификатором TextBox1 будут выполнять следующие действия:

  • Исчезает
  • Измените текст как текстового поля, так и диапазон текста на You clicked the button
  • Fade In

В зависимости от браузера, который я использую, я получаю 3 разных сценария, и каждый элемент работает по-разному в каждой ситуации. Вот что происходит, когда я нажимаю кнопку:

TextBox1:

  • В IE8 текстовое поле исчезает, изменяет текст, а затем возвращается обратно в
  • В IE8 Compatibility View текстовое поле исчезает, изменяет текст, а затем возвращается обратно. Однако текст в поле выглядит немного иначе, чем до нажатия кнопки.
  • В FireFox 3.5.8 текстовое поле не исчезает (но оно «приостанавливает» количество времени, необходимое для затухания), изменяет текст, а затем снова «останавливается» там, где оно будет исчезать.

Label1

  • В IE8 метка не исчезает (но она «приостанавливается» на время, которое займет затухание), изменяет текст, а затем снова «останавливается» там, где он исчезает.
  • В IE8 Compatibility View метка действительно исчезает, изменяет текст и возвращается обратно, но текст выглядит немного иначе, чем до нажатия кнопки.
  • В FireFox 3.5.8 метка не исчезает (но она «приостанавливает» количество времени, необходимое для исчезновения), изменяет текст, а затем снова «останавливается» там, где это будет постепенно исчезает.

Два вопроса:

  1. Что заставит каждый элемент вести себя по-разному в разных браузерах?
  2. Есть ли лучший способ получить нужную мне функциональность на разных платформах?

Вот исходный код файла: 

<!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>

1 Ответ

3 голосов
/ 07 апреля 2010

У меня возникла такая же проблема.Чтобы исправить это, я попробовал это, и это сработало.

Вместо: 

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

Я использовал: 

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

Попробуйте использовать другую версию или получить ее из другого источника, если вам действительно нужна версия Visual Studio.

...