4

ここで、テキストから画像へのロールオーバーを作成する良い方法を見つけていじりました：http://jsfiddle.net/pkZAW/12/

    $( function() {
  $("#imglink").hover(
    function () {
      $(this).attr('small',$(this).html());
      $(this).html($(this).attr('full'));
    },
    function () {
       $(this).html($(this).attr('small'));
    }
  );
});​

ただし、ここのサムネイル画像にあるように、トランジションのインとアウトをフェードする必要があります: http://lydiafraserward.co.uk/index.php?page=producing

いろいろ調べた結果、このトランジションをスクリプトに追加できませんでした:-? .. 何か案は..？

4

1 に答える 1

1

この状況では live() は必要ないと思います。アニメーションがスタックするため、mouseleave 関数ではフェードアウトを使用しません。

これを試すこともできます：

$( function() {
    $("#imglink").hover(
    function () {
        $(this).attr('small',$(this).html());
        $(this).stop(false,true).fadeOut(250,function() {
            $(this).html($(this).attr('full'));
            $(this).stop(false,true).fadeIn(250);
        });
   }, function () {
        $(this).html($(this).attr('small'));

   });
  });

編集: ちらつき効果は、アンカー タグの周りにスパン タグを使用して修正されます: デモ: http://jsfiddle.net/LYjvp/1/

于 2012-11-15T16:10:56.370 に答える