2

何らかの理由で、ページの読み込み時にループ内の要素の正確な高さの値を取得するのに問題がありますが、でまったく同じ関数each()を試してみると、正常に機能します。私が何を意味するのか分かりますか？説明の高さを取得し、それを使用して初期位置を決定することになっています。height()mouseleavediv

これは、高さを設定する前に画像を読み込む必要があることと関係があるのではないかと思ったので、load()それ以降まで遅らせる試みでした。高さはそれがない場合よりも大きくなるように見えますが、それでも実際の高さよりは小さくなります。何か案は？

jQuery(document).ready(function() {

var total = jQuery('.portfolio-item-holder figure').length;
var numLoaded = 0;

jQuery('.portfolio-item-holder img').one('load', function() {
  numLoaded++;
  if (numLoaded == total) {

    jQuery('.portfolio-item-holder figure').each(function(e) {
      var desc = jQuery(this).find('.description').outerHeight(true);
      console.log(desc);
      jQuery(this).find('figcaption').animate( { 'bottom' : -1 * desc }, 400, 'easeInOutQuart' );
    });

  }
}).each(function(){
  if(this.complete) jQuery(this).trigger('load');
});

jQuery('.portfolio-item-holder figure').bind('mouseenter', function(e) {

  var title = jQuery(e.currentTarget).find('h3').position();
  jQuery(e.currentTarget).find('figcaption').animate( { 'bottom' : '0', 'queue' : false }, 400, 'easeInOutQuart' ); 

}).mouseleave(function(e) {
  var desc = jQuery(e.currentTarget).find('.description').outerHeight(true);

  jQuery(e.currentTarget).find('figcaption').animate( { 'bottom' : -1 * desc, 'queue' : false }, 400, 'easeInOutQuart' ); 

});

});
4

1 に答える 1

2

ある方法でうまくいかないときは、別の方法でうまくいくようにしてください。これは私が推奨するものです：

1) CSS で、1a).descriptionクラスを にdisplay:none;設定し、1b).portfolio-item-holder figcaptionクラスを に設定します。bottom:0px;

2)マウス イベント ハンドラをセットアップします。

function PortfolioImageHandler() {

    $('#portfolio-item-holder').on({

          mouseenter: function () { ShowPortfolioDescription($(this)); },
          mouseleave: function () { HidePortfolioDescription($(this)); }

    }, '.portfolio-item');
}

3)イベント ハンドラーを実装します。

function ShowPortfolioDescription(ThePortfolioItem) {
    ThePortfolioItem.find('.description').stop().slideDown(500);
}

function HidePortfolioDescription(ThePortfolioItem) {
    ThePortfolioItem.find('.description').stop().slideUp(200);
}

4)コード構造を次のように変更します。

$(document).ready(function () {
  //you should only have calls to other functions, no actual implementations
  //should be coded in the document.ready function; keep the handlers out of here
  PortfolioImageHandler();
});

function PortfolioImageHandler() {...}
function ShowPortfolioDescription (ThePortfolioItem) {...}
function HidePortfolioDescription (ThePortfolioItem) {...}

これにより、コードが数行に大幅に削減されます。この.stop()関数は、ユーザーが mouseenter/mouseleave イベントを繰り返し発生させたときにヨーヨー効果を防ぐのに役立つことに注意してください。各イベントは、slideUpまたはを実行する前に、進行中のアニメーションをキャンセルしますslideDown。これがどのように機能するか教えてください。Chrome のインスペクターで設定を手動で変更した結果を示す 2 つの写真を次に示します。ところで、IE8 でサイトを見ると、設定した方法は機能しませんでした。推奨される実装は正常に機能するはずです。

ここに画像の説明を入力

ここに画像の説明を入力

フォローアップ: 私はずっとエレンに会っています。ブラウザの出力は異なりますか?

ここに画像の説明を入力

于 2012-09-20T00:59:39.383 に答える