Question

我希望这些括号滑出并在悬停时将单词换行。然后关闭悬停崩溃到原来的状态。

更好的跨浏览器方法？

HTML（为便于阅读而格式化）：

<h2 id="title">
    <span id="bracket1">[</span>
    <span id="bracket2">]</span>
CUBIX</h2>

jQuery的：

$("#title").hover(function(){
    $("#bracket2").animate({ left: "170px" });
});

演示：http://codepen.io/anon/pen/afjHh

Answer 1

我想如果你想让它崩溃，我会做类似的事情。

http://codepen.io/anon/pen/qrcmg

$( "#title" ).hover(
  function() {
    $("#bracket2").stop(true, false).animate({ left: "170px" });
  }, function() {
    $("#bracket2").stop(true, false).animate({ left: "20px" });
  }
);

Answer 2

到目前为止这种方法非常有效。唯一剩下的就是动画回来了

$("#title").hover(function(){
    $("#bracket2").animate({ left: "170px" });
}, function(){
    $("#bracket2").animate({ left: "20px" });
});

请参见修改后的JSFiddle

使用CSS transition

可以实现仅限CSS的版本

h2:hover span#bracket2 {
    left: 170px;
    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    transition: left 1s;
}

请参阅JSFiddle

更好地处理这个jquery /代码？

2 个答案: