JS功能适用于Chrome& IE,但不是在Firefox中

时间:2017-05-16 16:44:35

标签: javascript jquery firefox

我不是Javascript或任何类型的专家,所以这里。 我正试图让这些功能与Firefox一起使用。 他们在Chrome和IE中工作没有任何问题。它在Firefox中表明它未定义。

功能

    function fnScrollandBlink(element) {
    event.preventDefault();
    fnScrollSmooth(element, null);
    fnBlink(element);
}

function fnBlink(element) {
    var blinkAmount = 2
        //event.preventDefault();
        //Multiple elements must be seperated by ; simbol.
        //this will seperate it in to an array.
    var arrayElementsBlink = element.split(";");
    var oldBlinkElementsToStop;
    //Stoping all blinks
    $.each(oldBlinkElementsToStop, function(index, blinkToStop) {
        $('#' + blinkToStop).finish();
        $('#' + blinkToStop).fadeIn(0);
    });
    //Start blinking the clicked option
    $.each(arrayElementsBlink, function(index, elementToBlink) {
        var blinkCurrAmo = 1;
        while (blinkCurrAmo <= blinkAmount) {
            $('#' + elementToBlink).fadeOut('fast');
            $('#' + elementToBlink).fadeIn('fast');
            blinkCurrAmo++;
        }
    });
    oldBlinkElementsToStop = arrayElementsBlink;
}

function fnScrollSmooth(element, offsetTop) {
    //event.preventDefault();
    //Multiple elements must be seperated by ; simbol.
    //this will seperate it in to an array.
    var scrollToID = element.split(";");
    var offsetTop, offsetTopDefault;
    offsetTopDefault = 200;
    if (offsetTop == null) {
        offsetTop = offsetTopDefault;
    }
    //Move to section before blinking
    $('html, body').stop(); //Stop current animation
    $('html, body').animate({
        scrollTop: $('#' + scrollToID[0]).offset().top - offsetTop
    }, 500);
}

我使用以下方法在html代码中调用函数 fnScrollandBlink

onClick="fnScrollandBlink('elementID');"

这应该做的是滚动到网页中的该部分并将元素闪烁2次。

正如我所说,它适用于IE和Chrome。

您可以在此处查看代码示例:codepen test code

或者你可以使用下面的stackoverflow版本:

function fnScrollandBlink(element) {
  event.preventDefault();
  fnScrollSmooth(element, null);
  fnBlink(element);
}

function fnBlink(element) {
  event.preventDefault();
  //Multiple elements must be seperated by ; simbol.
  //this function will seperate it in to arrays.
  var blinkAmount = 2
  var arrayElementsBlink = element.split(";");
  var oldBlinkElementsToStop;
  //Stoping all blinks
  $.each(oldBlinkElementsToStop, function(index, blinkToStop) {
    $('#' + blinkToStop).finish();
    $('#' + blinkToStop).fadeIn(0);
  });

  //Start blinking the clicked option
  $.each(arrayElementsBlink, function(index, elementToBlink) {
    var blinkCurrAmo = 1;
    while (blinkCurrAmo <= blinkAmount) {
      $('#' + elementToBlink).fadeOut('fast');
      $('#' + elementToBlink).fadeIn('fast');
      blinkCurrAmo++;
    }
  });
  oldBlinkElementsToStop = arrayElementsBlink;
}

function fnScrollSmooth(element, offsetTop) {
  event.preventDefault();
  var scrollToID = element.split(";");
  var offsetTop, offsetTopDefault;
  offsetTopDefault = 200;
  if (offsetTop == null) {
    offsetTop = offsetTopDefault;
  }
  //Move to section before blinking
  $('html, body').stop(); //Stop current animation
  $('html, body').animate({
    scrollTop: $('#' + scrollToID[0]).offset().top - offsetTop
  }, 500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul>
  <li>
    <b>Title 1</b>:
    <br> TEST TEXT
    <br> Click here and it should <a href="#" onClick="fnScrollandBlink('testJump');">Scroll and blink after</a>.
    <br> TEST TEXT
  </li>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<ul>
  <li id="testJump">
    <b>Title 2</b>:
    <br> Test text test text test text test text test text
    <br> Test text test text test text test text test text
    <br> Test text test text test text test text test text
  </li>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> End Test

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

找到所有人的解决方案。 首先,我说它与Chrome和IE一样工作。函数声明都在SynchronizedBiMap部分中使用DIR地址,而mutex未声明,但工作从不如此。它只是在FF(firefox)中,都不起作用。

两个问题的解决方案,(至少对我而言):

我在PC上使用本地文件及其JS。函数在FF中加载的原因是它根本没有加载de JS,但直到现在我都不明白为什么。问题是Firefox没有读取正常的资源管理器DIR。我不得不将DIR翻译成普通的html语法网址<head>和一堆,例如:event

第二个问题是事件在FF中不起作用,我尝试了多个选项,但是有效的是在实际调用中声明事件。唯一的问题是我必须在每个函数中为这种情况声明事件,但我并不在乎。

所以用onClick调用就像这样,添加事件:

%20

调用的主要函数看起来像这样,事件到位:

file:///c:/blink%20folder/blink.js

示例片段直播:

&#13;
&#13;
onClick="fnScrollandBlink(event,'IntEmAdd;testtop');"
&#13;
function fnScrollandBlink (event, element){
    event.preventDefault();
    fnScrollSmooth(event, element,null);
    fnBlink(event, element);
}
&#13;
&#13;
&#13;