JQuery UIサイズの効果が右下の原点から始まらない

Question

JQuery UIエフェクト「サイズ」を使用して、ページ上の3つの別々のdivを拡大しています。アイデアは、左側に1 div、右側に2 divがあるということです。左のdivは左上から始まり、右上のdivは右上から始まり、右下のdiv はは右下からスケールアップする必要がありますが、右上からスケールアップしています。

私は次のリンクを使ってどこにいるのか分かります。

http://www.fusionbureau.com/sh-test/

すべてのdivがゼロの幅と高さで始まりとjQueryで指定されたサイズにスケールアップされます。左のdivと右上のdivは、それぞれ左と右にフローティングされています。右下のdivは、絶対配置されたコンテナに囲まれ、divは右に浮かびます。私はコンテナを浮かべて、絶対に含まれているdivを配置するなどの代替案を試しましたが、拡大後は常に間違った場所に終わります。この場合、サイズの効果も間違っています - 右上から始まります。

ここにHTML、CSS、およびJqueryがあります。

HTML

<div id="index-container"> 
<div id="content-left"> 
<p>Lorem ipsum dolor amet</p> 
<p>Lorem ipsum dolor amet</p> 
<span><a href="1">1</a> <a href="2">2</a> <a href="3">3</a> <a href="4">4</a></span> 
</div> 
<div id="content-topright"><p>Our stories</p></div> 
<div id="content-bottomright-wrapper"> 
<div id="content-bottomright"> 
    <p>blah</p> 
</div>  
</div> 
</div> 

CSS

#index-container{ 
position:relative; 
height:544px; 
width:940px; 
color:#fff; 
} 
#content-left{ 
top:0; 
left:0; 
width:0; 
height:0; 
position:relative; 
float:left; 
background-image:url('images/wall.jpg'); 
background-color:#000; 
} 
#content-topright{ 
float:right; 
width:0; 
height:0; 
position:relative; 
background-color:#058625; 
} 
#content-bottomright-wrapper{ 
position:absolute; 
bottom:0; 
left:574px; 
padding:0; 
width:364px; 
height:262px; 
} 
#content-bottomright{ 
float:right; 
padding:0; 
width:0; 
height:0; 
position:relative; 
background-color:#ccc; 
margin:0 auto !important; 
} 

jQueryの

function displayBoxes(){  
var fadeinspeed = 600; 
var transitiondelay = 400; 
var content_left_height = "544px"; 
var content_left_width = "555px"; 
var content_topr_height = "262px"; 
var content_topr_width = "364px"; 
var content_botr_height = "262px"; 
var content_botr_width = "364px"; 

$('#content-left').children().hide(); 
$('#content-topright').children().hide(); 
$('#content-bottomright').children().hide(); 
$('#content-left').effect('size', { to: { width: content_left_width, height: content_left_height }, origin: ['top','left'] ,scale: 'box'}, fadeinspeed, function() { fadeinKids('#content-left')}); 
$('#content-topright').delay(transitiondelay).effect('size', { to: { width: content_topr_width, height: content_topr_height }, origin: ['top','right'] ,scale: 'box'}, fadeinspeed, function() { fadeinKids('#content-topright')}); 
$('#content-bottomright').delay(transitiondelay*2).effect('size', { to: { width: content_botr_width, height: content_botr_height }, origin: ['bottom','right'] ,scale: 'both'}, fadeinspeed, function() { fadeinKids('#content-bottomright')}); 
}; 

function fadeinKids(parentObj){ 
var kids = $(parentObj).children(); 
var myitems = kids.hide(); 
var i = 0; 
     (function displayKid() { 
     myitems.eq(i++).fadeIn('', displayKid); 
     })(); 
}; 

fadeinkids機能を無視することができる - これはただのdiv内の要素をフェードインするために、彼らはフルに達しているされた後、サイズ。

私はそれを含んでいるdivの右下に配置する必要があるようですが、これはdivの左上隅に表示されているdivの右下隅に効果が現れ、フルサイズそれは所定の場所に飛ぶ。

何か助けやアドバイスをいただければ幸いです。

Answer 1

私はJQuery UIをあきらめました。以下は、私がどのようにしたかを示しています。要素の右下から左上に向かって右下のブロックのコードが生成されます。

HTML

<div id="content-bottomright-wrapper"> 
<div id="content-bottomright"> 
<img src="images/home/map.png"> 
</div>  
</div> 

CSS

#content-bottomright-wrapper{ 
display:block; 
position:absolute; 
bottom:0; 
left:574px; 
padding:0; 
width:364px; 
height:262px; 
margin:0 !important; 
} 
#content-bottomright{ 
padding:0; 
width:0; 
height:0; 
position:relative; 
background-color:#ccc; 
} 

のJavascript（jQueryの）

function scaleReverse(item,scaleSpeed,scaleDelay,mycallback){ 
    scaleDelay = scaleDelay || 0; 
    $(item).height(0); 
    $(item).width(0); 
    var daddy = $(item).parent(); 
    var targetheight = daddy.height(); 
    var targetwidth = daddy.width(); 
    $(item).css("margin-top",targetheight); 
    $(item).css("margin-left",targetwidth); 
    $(item).delay(scaleDelay).animate({ 
    marginLeft: 0, 
    marginTop: 0, 
    width: targetwidth, 
    height: targetheight 
    }, scaleSpeed,function() {if (typeof mycallback == "function") mycallback()}); 
} 

    // call the function! 
    scaleReverse('#content-bottomright',600,800,function() {$('#content-bottomright').children().fadeIn()}); 

プラグインにこれ​​を有効にするのは簡単だろう。もっと時間があれば私はそうするでしょう。