1

srcの画像の属性にテキストの文字列を追加してから、mouseoverその文字列を削除しようとしていますmouseout。今、私は半分働いています：

Javascript

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

_animこのコードを別の場所で見つけたので、 の文字列を削除するためにコードを変更する方法が正確にはわかりませんmouseout。

4

4 に答える 4

2

両方の画像を読み込んでから、必要な画像のみを表示することをお勧めします。これはすべて CSS で実現できます。

一方の画像には「アニメーション」のクラスを、もう一方の画像には「非アニメーション」のクラスを指定します。この CSS を追加して、onhover の変更を処理します。

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

これは、マウスをホバーしたときではなくブラウザがすぐに画像をロードするため、よりうまく機能します。IMO も少しきれいです。

編集ああ、ホバーで再生を開始する必要がある場合は、自分のやり方で行う必要があります。次のようなことを試してください：

$('.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);
    });
  });

</p>

于 2012-05-23T16:56:14.140 に答える
1 
$(".singleSidebar .subnav img").hover(
  function () {
    $(this).attr('src', function(index, attr) {
      return attr.replace(/\.[^.]*$/, '_anim$&');
    });
  }, 
  function () {
    $(this).attr('src', function(index, attr) {     
        return attr.replace('_anim', ''); // or any other replace
    }); 
  }
);

詳細については、 http://api.jquery.com/hover/を参照してください。

于 2012-05-23T16:58:26.650 に答える
1

http://jsfiddle.net/dZ3c2/1/

var src;
$("img").hover(function() {
     src = $(this).attr("src");
    $(this).attr("src", "replacementsrc");
},function() {
     $(this).attr("src", src);
});​
于 2012-05-23T16:59:51.287 に答える
0

.mouseout を使用して、置換を元に戻すことができるはずです。

$('.singleSidebar .subnav img').mouseout(function(){     
    $(this).attr('src', function(index, attr) {     
        return attr.replace(/_anim$/, '');     
    }); 
});
于 2012-05-23T16:54:49.800 に答える