javascript - 根据链接#扩展显示动画

Question

是否可以将 jQuery 设置为捕获 # 链接并根据它选择的链接显示动画？

Example:

Click Link 1 > /index.php#1 = pulsate div 1

Click Link 2 > /index.php#2 = pulsate div 2

Click Link 3 > /index.php#3 = pulsate div 3

我目前有一个指南/规则页面，它希望在人们通过特定链接到达那里时突出显示正确的内容。我了解基本的 jQuery 动画，只是没有从父页面给它们规则。

Answer 1

1。从 URI 读取哈希

JS 的 window.location.hash 会读取像 "#1" 这样的哈希，这是 HTML5< 中的有效 ID/strong>

jQuery(function($) {
   $( window.location.hash ).addClass("pulsate");
});

你有DIV元素的地方

<div id="div1">I'm DIV 1</div>

还有一个CSS类

.pulsate {
  /* other styles here... */
  animation: pulsate 0.5s ease-in-out;
  animation-iteration-count: 5;                                    /* Pulsate 5 times */
}
@keyframes pulsate {
  0%    {transform: scale(1);}
  50%   {transform: scale(1.2);}
}

2。从点击的链接读取哈希

如果您对读取 URI 的散列不感兴趣，但您只有类似

的链接

<a class="animateButton" href="#div1">Animate DIV1</a>

这就是你所需要的:

$(".animateButton").on("click", function(){
  $( this.hash ).addClass("pulsate").on("animationend", function(){
    $(this).removeClass("pulsate");
  });
});

.pulsate {
  background: orange;
  animation: pulsate 0.5s ease-in-out;
  transition:0.5s;
  animation-iteration-count: 3; 
}
@-webkit-keyframes pulsate {
  0%    {transform: scale(1);}
  50%  {transform: scale(1.1);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="animateButton" href="#1">#1</a>
<a class="animateButton" href="#2">#2</a>
<a class="animateButton" href="#3">#3</a>

<div id="1">I'm DIV #1</div>
<div id="2">I'm DIV #2</div>
<div id="3">I'm DIV #3</div>