Jquery均勻地調整錨文本的大小

Question

我試圖均勻地增加然后減少段落內的錨文本的字體大小而不移動段落文本。 這樣，錨文本看起來好像是朝向用戶，然后后退回原來的位置。 字體大小也顯示為從左下角開始生長，而不是我想要的，從各個方面均勻地生長。

HTML：

<p>
  <a>[D]</a>I've been workin' on the railroad,
  <a>[G]</a>all the live long <a>[D]</a>day.
  <a>[D]</a>I've been workin' on the railroad,
  just to <a>[E]</a>pass the time a<a>[A]</a>way.
</p>

CSS：

p {
  white-space: pre-wrap;
}

a {
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  color:red;
}
.increase-font {
  font-size: 30px;
  background:#FFF;
}

jQuery的/ JavaScript的：

$('a').on('click',function(e){
  e.preventDefault();
  var el = this;
  $(el).addClass('increase-font');
  setTimeout(function(){  
   $(el).removeClass('increase-font');
  },1000);
});

這是小提琴：

https://jsfiddle.net/scooke/ro2tyf6h/

Answer 1

它相對簡單 - 只需將錨標記包裝在span標簽中：

<p><a><span>[D]</span></a>I've been workin' on the railroad,</p>
<p><a><span>[G]</span></a>all the live long <a><span>[D]</span></a>day.</p>
<p><a><span>[D]</span></a>I've been workin' on the railroad, just to <a><span>[E]</span></a>pass the time a<a><span>[A]</span></a>way.</p>

將錨點的位置設置為相對（使用邊距以使其子項跨越空間），同時還將span標記設置為absolute：

a {
  position: relative;
  max-height: 0px;
  max-width: 0px; 
  margin-right: 25px;
}

span {
  position: absolute;
  top: 0;
  left: 0;
}

然后只需將jQuery事件處理程序從所有錨標記注冊到所有span標記：

$('span').on('click',function(e){
  e.preventDefault();
  var el = this;
  $(el).addClass('increase-font');
  setTimeout(function(){  
   $(el).removeClass('increase-font');
  },1000);
})

從DOM流中刪除絕對元素，調整跨度的大小不會影響它周圍的元素。 完整代碼：

https://jsfiddle.net/ro2tyf6h/5/

Answer 2

為實現這一點，錨文本需要在某種程度上獨立於父級。 使用CSS插入錨文本:after選擇器:before或:after將解決問題。 查看我的示例並根據需要進行調整。

 $('a').on('click', function(e) { e.preventDefault(); var el = this; $(el).addClass('increase-font'); setTimeout(function() { $(el).removeClass('increase-font'); }, 1000); }) 

 p { white-space: pre-wrap; padding-left: 30px; display: inline-block; width: 100%; position: relative; } a { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; color: red; display: inline-block; position: relative; width: 30px; height: 10px; } a:before { content: "[D]"; position: absolute; left: 0; text-align: center!important; width: 100%; top: -5px; } .increase-font { font-size: 30px; background: #FFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <a></a>I've been workin' on the railroad,</p> <p><a></a>all the live long <a></a>day.</p> <p><a></a>I've been workin' on the railroad, just to <a></a>pass the time a<a></a>way.</p> 

建議：

1. 重構HTML將是一個良好的開端
2. 將背景添加到:hover狀態將有助於保持其清潔和可區分。