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

功能： 当用户通过按钮交互从一个页面导航到另一个页面时，在页面转换到下一页之前，第一页的侧边图标将闪烁/闪烁以快速连续。页面转换设置了动画，这样按钮将具有“下拉”效果，而新页面将滑动并淡入，而旧页面将滑动并淡出

已完成的操作：

我已尝试使用以下方法：

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++;
}

问题：

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

代码：

var isBlink=false；
var选择效应间隔；
var-selectEffectCounter=0；
澳大利亚的职能（）{
console.log（“澳大利亚”）；
$（“#澳大利亚”）。切换（“拖放”{
持续时间：幻灯片教学
}, {
放松：“放松”夸脱，
队列：false
});
$（“#新西兰精确定位”）.hide（）；
如果（isBlink）{
isBlink=false；
如果（selectEffectCounter==5）{
选择effectcounter=0；
clearInterval（selectEffectInterval）；
}
}否则{
$（“#新西兰精确定位”）.fadeIn（）；
$（“#新西兰精确定位”）.fadeOut（）；
isBlink=true；
选择effectcounter++；
}
$（“#大洋洲页面”）。淡出({
持续时间：幻灯片教学，
队列：false
});
$（“#Oceania_页”）。设置动画({
“左”：“1921px”
}, {
持续时间：幻灯片教学，
放松：“放松”夸脱，
队列：false
});
$（“#澳大利亚#u页”）.fadeIn({
持续时间：幻灯片教学，
队列：false
});
$（“#澳大利亚页面”）。动画({
“左”：“0px”
}, {
持续时间：幻灯片教学，
放松：“放松”夸脱，
队列：false
});
}

---

这里有一个工作模型，我假设您需要它，它可以正常工作-注意，这只是按钮部分，还有一段代码使用setTimeout-如代码中所述，而不是使用setTimeout，您可以使用jquery为动画方法提供的

[complete]

回调

$（函数（）{
$（“.nav”）。单击（函数（）{
var$curr=$（“.nav.current”）；//确定以前选择的按钮
$curr.addClass（'blinky'）；//添加blinky类
$curr.removeClass（'current'）；//从以前选择的按钮中删除与current关联的任何类
$（this）.addClass（'current'）；//将与当前选择关联的任何类添加到刚才按下的按钮
函数animationDone（）{
$curr.removeClass（'blinky'）；
}
//制作网页内容的动画
设置超时（动画完成，2500）；
//我使用setTimeout只是为了延迟——您要做的是使用jQuery动画方法的“complete”回调
});
});
.current{
盒影：0 0 5px#00ff00；
}
布林奇先生{
动画持续时间：100ms；
动画名称：闪烁；
动画方向：交替；
动画迭代次数：无限；
}
@关键帧闪烁器{
0% {
不透明度：1.0；
}
100% {
不透明度：0.3；
}
}

链接1

链接2

链接3

链接4
您将fadeIn放在fadeOut中的函数中（或者反过来）。以下是一个工作版本：

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

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

下面是一个JSFIDLE：

很难从代码中看出，但可能是在上一个动画完成之前，您正在按钮上设置动画。。。同样，很难说，因为代码不是很清楚-我建议使用CSS动画而不是jquery-但这是我的反jquery偏见showing@JaromandaX有没有一种方法可以让它同时运行？同样，不清楚-你实际上并没有导航到一个新的URL，是吗？@JaromandaX，没有。。它只是从第一张幻灯片导航到下一张幻灯片，都在同一个url和目录中OK，这很好-所以您想要做的是可能的。