javascript - jQuery:向 src 属性添加/删除文本字符串

Question

我试图在 mouseover 上将文本字符串附加到图像的 src 属性，然后在 mouseout 上删除该字符串.现在我已经完成了一半:

Javascript

$('.singleSidebar .subnav img').mouseover(function(){
    $(this).attr('src', function(index, attr) {
    return attr.replace(/\.[^.]*$/, '_anim$&');
    });
});

我在其他地方找到了这段代码，所以我不确定如何修改它以删除 mouseout 上的字符串 _anim。

Answer 1

我建议只加载两张图片，然后只显示您想要的一张。这一切都可以用 CSS 来完成。

给一个图像一个类别“动画”，另一个类别“非动画”。添加此 CSS 以处理悬停更改:

    .singleSidebar .subnav img.animated,
    .singleSidebar .subnav img.nonanimated:hover
    {
        display: none;
    }
    .singleSidebar .subnav img.animated:hover,
    .singleSidebar .subnav img.nonanimated
    {
        display: block
    }

这样效果会更好，因为浏览器会立即加载图像，而不是在您将鼠标悬停时加载图像，这在我看来也更干净一些

编辑啊，如果您需要它们在悬停时开始播放，那么您需要按自己的方式进行。尝试这样的事情:

$('.singleSidebar .subnav img').each(function(e){
    var src = $(this).attr('src');
    $(this).hover(function(){
      $(this).attr('src', src.replace('.gif', '_anim.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });