4

私のサイトでは、ボックスは説明にフェードインするはずです。これは、IE10 を除く、私が試したすべてのブラウザーで機能します。これは WordPress サイトで、9 つのプラグインを使用しています。すべてのプラグインを無効にしようとしましたが、ホバーは IE10 ではまだ機能しません。

以下は、ホバーに使用しているコードです。

jQuery(document).ready(function($){

$('.thumbnail').hover(function() {
  $('img', this).stop(true,true).fadeTo(100, 0.1);
  $('.description', this).stop(true,true).fadeIn(100);
}, function() {
  $('img', this).stop(true,true).fadeTo(100, 1);
  $('.description', this).stop(true,true).fadeOut(100);
});

});

誰かが問題を特定するのを手伝ってくれますか? 重要な情報を省略した場合は、お知らせください。ありがとうございました。

編集：フィルタリング/ホバーのコード全体。

  // Filter
  $(function() {

    var time_effect = 1000;
    var effect_name = 'easeOutQuart';

    $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });

            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });

    $('.btn_all').click(function(e) {
      $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_identity').click(function(e) {
      $('.all').quicksand( $('.identity article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_web').click(function(e) {
      $('.all').quicksand( $('.web article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_illustration').click(function(e) {
      $('.all').quicksand( $('.illustration article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.btn_print').click(function(e) {
      $('.all').quicksand( $('.print article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 1);
                    $('.description', this).stop(true,true).fadeOut(600);
                });
            $("body.blog #content article:last, body.archive #content article:last, body.search-results #content article:last").addClass("last");
      });
      $('.button_box a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });
  });
4

2 に答える 2

5

ここでの問題は、ブラウザ スニッフィング コードにあります。Internet Explorer 10 のユーザー エージェント文字列*を Chrome のユーザー エージェント文字列に変更し、ブラウザーを更新します。うまく機能することがわかります。

スクリプトは$.browser.msie、Internet Explorer 10 が Internet Explorer 7、8、および 9 に似ていることを利用して想定しています (そうではなく、根本的に異なります)。あなたの状況の原因は、jQuery QuickSand にあります。次の条件を見てください。

if ( $.browser.msie && $.browser.version.substr(0,1) < 7 ) {
    $sourceParent.html('').append($collection);
    return;
}

このテストでは、バージョン番号の最初の値のみをチェックすると、Internet Explorer 10 がサポートされているバージョンである 7 よりも明らかに低いバージョン "1" として誤って識別されます。

これは6 か月前に修正されました。GitHub から QuickSandの最新バージョンをダウンロードします。

Internet Explorer のユーザー エージェント文字列の変更

F12 を押して開発者ツールを表示します。選択Tools > Change user agent stringすると、他の ua-string オプションが表示されます。「Chrome」を選択し、ブラウザを更新してHTTPリクエストを「Chrome」として再発行します。

于 2013-04-15T01:07:31.063 に答える
1

.thumbnailコードの実行時に IE 10 用のオブジェクトが存在するかどうかを確認するには、現在の への呼び出しの上の行にこれを挿入し.hoverます。

console.log($('.thumbnail').length);

これがログに記録される場合0、ホバー イベント ハンドラーが接続されない理由が説明されます。なんらかの理由で、IE 10 は、コードが実行された時点でこれらの要素がまだ存在しないと見なします。より適切に機能するイベントをバインドする別の方法を次に示します。

jQuery(document).ready(function($){

    $(document.body)
        .on('mouseenter', '.thumbnail', function() {
            $('img', this).stop(true,true).fadeTo(100, 0.1);
            $('.description', this).stop(true,true).fadeIn(100);
        })
        .on('mouseleave', '.thumbnail', function() {
            $('img', this).stop(true,true).fadeTo(100, 1);
            $('.description', this).stop(true,true).fadeOut(100);
        });

});

これが行うことは、このコードが最初に実行されたときにそれらの要素が存在するかどうかに関係なく、「サムネイル」クラス名を持つ要素にのみ適用されるグローバル イベント ハンドラーのペアを設定することです。問題が IE 10 のタイミングの問題である場合は、これで解決する可能性があります。

于 2013-04-14T23:19:13.667 に答える