Question

功能性： 当用户通过与按钮的交互从一个页面导航到另一个页面时，在页面转换到下一页之前，第一页面的侧面图标将闪烁/闪烁以便快速连续。对页面过渡进行动画处理，使按钮具有“删除”功能。当旧页面滑动并淡出时，新页面将滑动并淡入。

已完成的工作：

我尝试过使用以下内容：

var isBlink = false;
var selectEffectInterval;
var selectEffectCounter = 0;

if (isBlink) {
  isBlink = false;

  if (selectEffectCounter == 5) {
    selectEffectCounter = 0;
    clearInterval(selectEffectInterval);
  }
} else {
  $('#NewZealandPinPoint').fadeIn();
  $('#NewZealandPinPoint').fadeOut();
  isBlink = true;
  selectEffectCounter++;
}

问题：

在页面转换期间，我无法看到效果。因此，我想问一下，当按钮与用户交互时，如何将侧边图标设置为闪烁/闪烁

代码：

＆＃13;

var isBlink = false;
var selectEffectInterval;
var selectEffectCounter = 0;

function Australia() {
  console.log("Australia");

  $('#Australia').toggle("drop", {
    duration: slideDuration
  }, {
    easing: 'easeInOutQuart',
    queue: false
  });
  $('#NewZealandPinPoint').hide();

  if (isBlink) {
    isBlink = false;

    if (selectEffectCounter == 5) {
      selectEffectCounter = 0;
      clearInterval(selectEffectInterval);
    }
  } else {
    $('#NewZealandPinPoint').fadeIn();
    $('#NewZealandPinPoint').fadeOut();
    isBlink = true;
    selectEffectCounter++;
  }

  $('#Oceania_Page').fadeOut({
    duration: slideDuration,
    queue: false
  });
  $('#Oceania_Page').animate({
    'left': '1921px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });


  $('#Australia_Page').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#Australia_Page').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });

}

＆＃13;

<div id="Oceania_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=5; top:0px; left:1921px; ">
  <img src="lib/img/Country/Oceania/Background.png" />

  <!--Countries-->
  <img id="AustraliaPinPoint" src="lib/img/Country/Oceania/AustraliaPinPoint.png" />
  <button id="Australia" onclick="Australia()">
    <img src="lib/img/Country/Oceania/Country/Australia.png">
  </button>

  <button id="PageBack" onclick="PreviousPage()">
    <img src="lib/img/VideoBackButton.png">
  </button>
</div>

<div id="Australia_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:1921px; ">
  <img src="lib/im/FootprintsBackground.png" />

  <button id="PageBack" onclick="Page()">
    <img src="lib/img/VideoBackButton.png">
  </button>
</div>

＆＃13;

Answer 1

这里是一个工作模型的工作，因为我认为你想要它 - 注意，这只是按钮部分，并且有一段使用setTimeout的代码 - 如代码中所述，而不是使用setTimeout，你将使用jquery对动画方法的[complete]回调

＆＃13;

$(function() {
  $(".nav").click(function() {
    var $curr = $(".nav.current"); // determine the previously selected button

    $curr.addClass('blinky'); // add the blinky class
    $curr.removeClass('current'); // remove any class associateed with current from previous selected button

    $(this).addClass('current'); // add any class associateed with current selection to the button that was just pressed

    function animationDone() {
      $curr.removeClass('blinky');
    }
    // do your animation of page content
    setTimeout(animationDone, 2500);
    // I use a setTimeout just for the delay - what you would do is use the "complete" callback of the jQuery animation method 
  });
});

＆＃13;

.current {
  box-shadow:0 0 5px #00ff00;
}
.blinky {
  animation-duration: 100ms;
  animation-name: blinker;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
@keyframes blinker {
  0% {
    opacity:1.0;
  }
  100% {
    opacity:0.3;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="nav current">Link 1</button><br />
<button class="nav">Link 2</button><br />
<button class="nav">Link 3</button><br />
<button class="nav">Link 4</button><br />

＆＃13;

Answer 2

您将fadeIn放在fadeOut（或其他方式）中的函数内。这是一个工作版本：

var isBlink = false,
  blink = function($this){
    $this.fadeOut( function(){ 
        $this.fadeIn();
        if (isBlink) blink($this);
    });
}

$("#AustraliaPinPoint").click( function(){
    isBlink = !isBlink;
    blink($(this));
});

这是一个jsfiddle：

https://jsfiddle.net/mckinleymedia/bz5nkbyq/

单击时如何将图标设置为闪烁

2 个答案: