jQuery: многократное (нежелательное) исчезновение в Firefox - PullRequest
Новая
       4

jQuery: многократное (нежелательное) исчезновение в Firefox

1 голос
/ 09 сентября 2010

Я только сейчас начинаю изучать jQuery (v1.4.2) и создал небольшой статический пример для самообразования.

Я использую Firefox 3.6.9, Chromium 6.0.472.53и Opera 10.61 на платформе Linux.

Я считаю, что мой пример работает, как и ожидалось, в Chromium и Opera, но я получаю очень раздражающее мерцающее поведение jQuery fadeIn, которое происходит дважды в Firefox.

IМне интересно, если кто-то еще сталкивался с такой же проблемой или есть какие-либо известные обходные пути.

Вот код:

index.html 

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="mainDiv"></div>
</body>
</html>

main.js

function showA1()
{
  $.get("zh1.html", function(data){$("#mainDiv").html(data);});
}
function showB2()
{
  $.get("zh2.html", function(data){$("#mainDiv").html(data);});
}
function clickA1()
{
  $("#mainDiv").fadeOut(showB2);
  $("#mainDiv").fadeIn();
}
function clickB2()
{
  $("#mainDiv").fadeOut(showA1);
  $("#mainDiv").fadeIn();
}
function executeWhenReady()
{
  showA1();
}
$(document).ready(executeWhenReady);

zh1.html 

<div>Button A1</div><a href="javascript:clickA1();"><button id=A1>First button</button></a>

zh2.html 

<div>Button B2</div><a href="javascript:clickB2();"><button id=B2>Second button</button></a>

1 Ответ

2 голосов
/ 09 сентября 2010

Я склонен сомневаться в том, что эта проблема связана с самим Firefox, но, скорее, вы просто замечаете это в Firefox больше. Я думаю, что проблема, вероятно, связана с синхронизацией ваших вызовов $ .get и .fadeIn (). Что-то иметь в виду ... 

$("#mainDiv").fadeOut(showA1);
$("#mainDiv").fadeIn();

Эти две строки ставят в очередь две функции - fadeOut и затем fadeIn. Однако вы пытаетесь переключить контент где-то посередине.

Fade it out -> Внесите новый контент -> Fade it обратно в

То, что вы не учитываете, - это то, что для ввода нового контента может потребоваться время. Я предлагаю вам рефакторинг такие вещи. 

function showA1()
{
  $.get("zh1.html", function(data){
    var $blk = $("#mainDiv");
    $blk.html(data);
    // only try to fadeIn the container if it's hidden (as it won't be hidden on initial page load when you call showA1)
    $blk.is(':hidden') && $blk.fadeIn();
  });
}
function showB2()
{
  $.get("zh2.html", function(data){
    $("#mainDiv").html(data).fadeIn();
  });
}
function clickA1()
{
  $("#mainDiv").fadeOut(showB2);
}
function clickB2()
{
  $("#mainDiv").fadeOut(showA1);
}

Это делает так, чтобы операция fadeIn не ставилась в очередь до тех пор, пока html #mainDiv не был изменен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...