jquery - 画面外に div を配置し、ホバー時に戻す方法

Question

ここに私が使用しているコードのフィドルがあります: FIDDLE、 a.trigger が IE で動作するのを妨げる重複エラーのため、 a.trigger がホバーされるまで div.pop-up を画面から離す必要があります。

誰でもこれを行う方法を知っています

Answer 1

これは、ちょっとした古い学校のハックです。要素を画面から 1000px 左に配置し、アニメーションを実行する直前に戻します。

$(document).ready(function() {
    //If Javascript is running, change css on product-description to display:block
    //then hide the div, ready to animate
    $("div.pop-up").css({'display':'block','opacity':'0'})

    $("a.trigger").hover(
      function () {
        $(this).prev().css("left", "0px");
        $(this).prev().stop().animate({
          opacity: 1
        }, 500);
      },
      function () {
        // First answer had this line coming first.
        // $(this).prev().css("left", "-1000px");
        $(this).prev().stop().animate({
          opacity: 0
        }, 200);
        // It should actually probably be here
        // so the movement is still done invisibly
        $(this).prev().css("left", "-1000px");
      }
    )
  });​

また、css の左側に配置を追加する必要があります。

/* HOVER STYLES */
div.pop-up {
  /*display: none;*/
  text-align: left;
  position: absolute;
  left: -1000px;      // <--- Send me left
  margin-top: -10px;
  width: 120px;
  padding: 0px 13px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}

実際に私を見てください -> JSFiddle