隠しdivの幅を計算することができません

Question

VEGAによって下されました。 HERE IS THE WORKING FIDDLE.私はこの問題がどのように解決されたかを見るために、今後の訪問者のために全体の投稿を保持しています。

---

私は、握られたときに、下にある引き出しに関する情報を明らかにするボタンを作成しようとしています。

私は簡単にページに実装したいので、jQueryウィジェットに変えました。私はそれをボタンや引き出しの内容に応じて調整したいと思っています。しかし今はそうしていません。ユーザーは隠しデータと共に単一のHTML divタグを置くことができなければなりません。

理想的には、ボタン/引き出しの幅は、閉じた状態にあるときに引き出しが完全に隠れるように、2つの間の最大値に調整されます。私はちょうど私のユーザーが固定幅を設定するのをやめなければならないことを望んでいない。

私は助けが必要です！

は、ここでは次のようになりますものです：

関連するHTML（FiddleでフルHTML）：

<div class="download" data-value="It's awesome!">Visit Website</div> 

関連するCSS（フルCSS Fiddle）：

.button { 
    position:absolute; 
    padding:10px; 
} 

.drawer { 
    box-sizing:border-box; 
    z-index:-1; 
    position:absolute; 
    top:3px; 
    left:3px; 
    padding:6px 10px; 
    text-align:center; 
    -webkit-transition:0.3s left ease-in; 

} 

関連のjQuery（FiddleでフルjQueryの）：

$(function() { 
    $(".button").each(function() { 
     $(this).append("<div class='drawer'>" + $(this).data('value') + "<div class='handle'>||</div></div>"); 
     $(".drawer", this).css("width", $(".button").width()); 
    }); 

    $(".button").mouseenter(function() { 
     $(".drawer", this).css("left", $(".button").outerWidth()); 
    }).mouseleave(function() { 
     $(".drawer", this).css("left", "3px"); 
    }); 
}); 

Answer 1

あなたはthisボタンに基づいて幅を計算するようになりました。

$(function() { 
    $(".button").each(function() { 
     $(this).append("<div class='drawer'>" + $(this).data('value') + "<div class='handle'>||</div></div>"); 
     $(".drawer", this).width($(this).width()); //updated with this object 
    }); 

    $(".button").mouseenter(function() { 
     $(".drawer", this).css("left", $(this).outerWidth()); //updated with this object 
    }).mouseleave(function() { 
     $(".drawer", this).css("left", "3px"); 
    }); 
}); 

DEMO、以下を参照してください：http://jsfiddle.net/dELNa/11/

Answer 2

$(".download").mouseenter(function() { 
    totalWidth = 0; 
    totalWidth += $(this).outerWidth(true); 
    $(".drawer", this).css("left", totalWidth); 
}).mouseleave(function() { 
    $(".drawer", this).css("left", "3px"); 
}); 

そして、それは、オブジェクトの最終的なサイズに加えて内部のおいしい内容の値を取得します。