1

シンプルなホバー効果を実装しようとしているので、各プロジェクトにカーソルを合わせると、説明が右からスライドインします。

これまでのところ、私はこの設定をしています: http://jsfiddle.net/gnnSB/

そのフィドルでは、マウスでホバーしたときに説明がスライドインしないことに注意してください。ただし、フィルタリングはうまく機能します。

次に、この例を見てみましょう: http://jsfiddle.net/gnnSB/1/

ここでは、説明がスライドインしますが、Quicksand 機能 (以下を参照) を取り出したため、フィルタリングは機能しません。

これらの両方が連携する必要があります。対立があり、誰かが似たようなことを経験したことがあるかどうか疑問に思っています. これは簡単な修正ですか、それとも別の解決策に頼る必要がありますか?

流砂

$(function() {

    var time_effect = 400;
    var effect_name = 'easeOutQuart';

    $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      });

    $('.filter-all').click(function(e) {
      $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      });
      $('.filter a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.filter-web').click(function(e) {
      $('.all').quicksand( $('.web article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      });
      $('.filter a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });

    $('.filter-print').click(function(e) {
      $('.all').quicksand( $('.print article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      });
      $('.filter a').removeClass('selected');
      $(this).addClass('selected');
      e.preventDefault();
    });
  });

ホバー

$('.thumbnail').hover(function () {
    $('.description', this).stop().animate({
      right: 0
    }, 50);
  }, function () {
    $('.description', this).stop().animate({
      right: -280
    }, 50);
  });

編集:複数の機能強化を追加する方法はありますか? ファンシーボックスを取り入れようとしています。

// Fancybox
    var fbox = function() {
                $("a.single-image").fancybox({
                    'transitionIn'   : 'none',
                    'transitionOut'  : 'none',
                    'overlayColor'   : '#000',
                    'overlayOpacity' : '0.6'
                });
    };
4

1 に答える 1

1

これはあなたが必要とするものですか？編集：リファクタリングされた フィドルリンク

ホバー機能を配置する流砂用の別の構成 ( ) を追加する必要がありenhancementます。

enhancement: function() {
              $('.thumbnail').hover(function () {
                    $('.description', this).stop().animate({
                      right: 0
                    }, 50);
                  }, function () {
                    $('.description', this).stop().animate({
                      right: -280
                    }, 50);
                  });
        }
于 2013-04-30T00:35:43.660 に答える