0

色付きの画像を表示するホバーオーバーアクションを作成しようとしています。また、ホバーが削除されると、元の画像にフェードバックします。

現在、画像をフェードアウトして何も表示せず、新しい画像をフェードインします。これは、ホバーオフするかどうかに関係なく、その場所に留まります。

//Loop through the images and print them to the page
   for (var i=0; i < totalBoxes; i++){
    $.ajax({
     url: "random.php?no=",
     cache: false,
     success: function(html) {
      // following line I originally suggested, but let's make it better...
      //$('#bg').append(html).fadeIn('slow');
      // also note the fine difference between append and appendTo.
      var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
      $('img', $d).hover(function() {
       var largePath = $(this).attr("rel");
       $(this).fadeOut("slow", function() {
        $(this).attr({ src: largePath }).fadeIn("slow");
       });
      });
     }
    });
   }

アップデート：

このリンクを見てください：

http://www.yellostudio.co.uk/temp/index.php#

ロールオーバーでフェードインをクロスし、フェードアウトでアウトするように画像を取得しようとしています...

誰でも助けてくれませんか、私はとても近くにいて、これを回避するために何時間も費やしました...

4

8 に答える 8

1

元の画像パス（ホバーアウト時にフェードバックしたいパス）を保存してから、ホバーアウト時に復元する必要があると思います。

var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('img', $d).hover(function() {
    var largePath = $(this).attr("rel");
    $(this).data('orig', $(this).attr('src') );
    $(this).fadeOut("slow", function() {
         $(this).attr({ src: largePath }).fadeIn("slow");
     });
},function() {
    var origPath = $(this).data('orig');
    $(this).fadeOut("slow", function() {
         $(this).attr({ src: origPath }).fadeIn("slow");
     });
});

「明るい」画像がsrc属性として使用され、不透明度を使用して効果を実現するとします。

var $d = $(html).hide().appendTo('#bg');
$('img',$d).css('opacity',0.33);
           .hover( function() {
               $(this).fadeTo('slow',1.0);
            }, function() {
               $(this).fadeTo('slow',0.33);
            });
于 2009-11-05T20:11:17.787 に答える
1

hover()は 2 つの関数パラメータを取ります。1 つは 用mouseoverで、もう 1 つは 用mouseoutです。あなたは最初のものだけを提供しました。での画像のスワップを元に戻すには、秒を指定する必要がありますmouseout。

fadeOutとを同時に実行したい場合は、 のコールバックに をfadeIn入れないでください。それらを別々のステートメントにするだけです：fadeInfadeOut

$(this).fadeOut("slow");
$(this).attr({ src: largePath }).fadeIn("slow");

あなたがそれを持っている方法はfadeIn、が完了するまで開始されませんfadeOut。これにより、両方が同時に開始および終了します。

于 2009-11-05T19:10:35.157 に答える
1

私が提案するかもしれません：http://colorpowered.com/blend/

それはあなたが探していることをします。

編集： わかりました、まあ、1つには、コードのajax部分を変更して、すべての画像をjson経由で返すようにします（バックエンドで行う方がよいでしょうが、どのようにサイトが設定されています）。とにかく、他のイメージを不必要にフェードアウトしているようです。カラー画像を他の画像の上に絶対位置で配置するだけです。コードは次のようになります。

Javascript:

$.ajaxSetup({cache:false});
$('.hoverImg').live('mouseover',function() {
   $hovered = $(this);
   var colorPath = $hovered.attr("rel");
   var rndId = Math.floor(Math.random()*100000);
   var $colorImg = $('<img />');
   $colorImg
       .hide()
       .addClass("fader")
       .attr('src',colorPath)
       .attr('id','img_'+rndId)
       .css({position:'absolute',zIndex:10});
   $hovered.css({zIndex:9}).data('overImgId',rndId).before($colorImg);
   $('#img_'+rndId).stop().fadeIn("slow");
});
$('.hoverImg').live('mouseout',function() {
    var rndId = $(this).data('overImgId')
    $('#img_'+rndId).stop().fadeOut("slow");
});
$.getJSON('random.php',{numBoxes:totalBoxes},function(json) {
    if(json.length > 0) {
        $.each(json,function(i,val) {
            $(val).hide().appendTo('#bg').find('img').addClass('hoverImg');
        });
    }
});

PHP:

<?php //random.php (really simplified, probably)
if(isset($_GET['numBoxes']) && !empty($_GET['numBoxes'])) {
    /*
        Get all the html stuff you need into an array...
        Could look something like:
        $imgs = array(
            '<div><img src="foo.jpg" rel="color_foo.jpg" /></div>',
            '<div><img src="bar.jpg" rel="color_bar.jpg" /></div>'
        );
    */
    echo json_encode($imgs);
}

それは基本的にうまくいくはずです。そこにはいくつかのタイプミスやものが含まれているかもしれませんが、私が知る限り、それはうまくいくはずです. もちろん、シナリオによっては、これを微調整/変更する必要がある場合があります。

あなたのプロジェクトで頑張ってください！

重要な編集: PHP コードに重要な部分を追加するのを忘れていました。<img>タグに「rel」属性を追加しました。

于 2009-11-05T19:28:09.160 に答える
0

助けてくれてありがとう...私はどこかに行きました...私は最初に意図したよりも遅いので完全に満足していませんホバー時にのみ画像をロードしていたので、より速く...

しかし、ここに皆さんのおかげで解決策があります...

          //Loop through the images and print them to the page
        for (var i=0; i < totalBoxes; i++){
            $.ajax({
                url: "random.php?no=",
                cache: false,
                success: function(html) {

                    var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
                    $('#colour img').css("opacity", 0);
                    $('img', $d).hover(function() { 
                        $(this).stop().fadeTo(700, 1);
                    },function() {
                        $(this).stop().fadeTo(700, 0);
                    });

                }
            });
        }

そして私のphpプリント...

<div class="pf-box">
    <a href="#">
    <div class="black"><img src="'.$image_folder.'/'.$image_name.'.jpg" alt="'.$image_name.'" border="0" /></div>
    <div class="colour"><img src="'.$image_folder.'/'.$image_name.'-c.jpg" alt="'.$image_name.'" border="0" /></div>
    </a>
  </div>
于 2009-11-05T21:55:20.820 に答える
0

スタイルシートに次を追加します。

.colour {
  display:none;
}

次に、成功関数を次のようにします。

var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('.pf-box', $d).hover(function() {
  $('.colour', $(this)).fadeIn("slow");      
},function() {
  $('.colour', $(this)).fadeOut("slow");      
});

アップデート

読み込みが遅い問題を解決するには、PHP がすべての画像のオブジェクトを返すようにする必要があります (これを images.php と呼びます。以下のコードを の中に入れ<?php ?>ます)彼は古いバージョンの PHP を使用していました):

header('Content-type: application/json');
echo '{
  {'black' : 'url', 'colour' : 'url'},
  {'black' : 'url2', 'colour' : 'url2'}
}';

次に、必要なJavaScriptで：

//generate all the boxes
$.get('images.php',function(data){
  for (var i=0; i < totalBoxes; i++){
      var randomImage = data[Math.floor(Math.random() * data.length)];
      $('<div class="pf-box"><img class="black" src="' + randomImage['black'] + '" /><img class="colour" src="' + randomImage['colour'] + '" /></div>').hide().appendTo('#bg').fadeIn('slow').filter('.colour').css("opacity", 0);
  }
 },'json');

 //add the hover behavior to all the elements
 $('.pf-box').hover(function() {
   $('.colour',$(this)).stop().fadeTo(700, 1);
 },function() {
   $('.colour',$(this)).stop().fadeTo(700, 0);
 });

このコードは動作するはずですが、まだテストしていません。タイプミスがあるかもしれません。しかし、これが本筋です。

于 2009-11-05T20:14:20.653 に答える
0

クロス フェードを実行する場合は、フェード インするイメージとフェード アウトするイメージの 2 つのイメージが同時に必要です。私がこの効果で行ったページを見てください。私が書いたプラグインはページソースにあるので、それを見てください。2 つの画像はposition: absolute;、クロスフェードするときにページの同じ領域を占めることができるようにする必要があります。

そして、No Surprises が言ったようhoverに、マウス ホバーのコールバックのみを提供しており、オリジナルにクロス フェードバックする場所であるマウスのホバー解除は提供していません。

このコードは機能する可能性があり、CSS の絶対位置を覚えておいてください。また、CSS クラスを backImg に追加することもできます。画像は、ホバー イベントがサブスクライブされる個別の親要素にある必要があります。

for (var i=0; i < totalBoxes; i++){
    $.ajax({
        url: "random.php?no=",
        cache: false,
        success: function(html) {
            $(html)
                .hide()
                .appendTo('#bg')
                .fadeIn('slow')
                .children('img').each(function() {
                    var img = $(this);
                    var largePath = img.attr("rel");
                    var backImg = $("<img src='" + largePath + "'/>");
                    img.after(backImg);

                    img.parent().hover(
                        function() { // over
                            backImg.stop().fadeIn("slow");
                            img.stop().fadeOut("slow");
                        },
                        function() { // out
                            backImg.stop().fadeOut("slow");
                            img.stop().fadeIn("slow");
                        }
                    );
                });
        }
    });
}
于 2009-11-05T19:16:48.350 に答える