クリック時に画像の親コンテナを切り替える

Question

レイアウトを作成していて、機能に関するヘルプが必要です。必要条件は、288px（高さ）で、576px（高さ）の画像を保持するコンテナがあることです。ユーザーが親コンテナの任意の場所をクリックすると、イメージは同じ高さのままですが、親コンテナは完全な576ピクセルと半分の288ピクセルの間で切り替わります。したがって、イメージは常に同じ高さになりますが、親コンテナにはイメージの半分（ページの読み込み時）が表示されるか、ユーザーがクリックすると完全な高さが表示されます。今、私はその部分を把握することができず、コンテナが流れている間に画像の高さが変化するように見えません。今スタイリングは、この

HTML（スリム）jqueryの

.persona-banner { height: 576px; margin-top: -88px; z-index: -1; img { position: absolute; } } .lrg-img { height: 576px; width: 1024px; } .sm-img { height: 288px; width: 1024px; } 

$('img#perImg').click(function() { 
     $(this).toggleClass("sm-img lrg-img", 1000); 
     if ($(this).hasClass('sm-img')) { 
     // moving other elements with the switch 
     $('.persona-header-bottom').css('margin-top', '-400px'); 
     } else { 
     $('.persona-header-bottom').css('margin-top', '-130px'); 
     } 
    }); 

（クラス間をトグル）

.persona-banner 
    img#perImg.sm-img [alt='Persona Banner' ng-src="{{ persona.banner }}"] 

CSSのように見えます

私がこれに加えて試したいくつかのオプションは、persona-bannerコンテナを切り替える別のコンテナ内のすべてをラップし、隠しオーバーフロー-yを追加し、イメージと親コンテナの異なる位置を追加することです。あなたはtoggleClassがどのように機能するかを誤解しているいただければ幸いです:)

Answer 1

はあなただけdiv.persona-bannerない画像の高さを変更する必要があるとの残りの部分を隠すためにそのoverflow:hiddenを行います像高が288px

https://jsfiddle.net/gtq6nL2a/

.persona-banner { 
    height: 288px; 
    z-index: -1; 
    overflow:hidden; 
} 

.persona-banner img { 
    height: 576px; 
    width: 1024px; 
    margin-top:-144px; 
} 

.persona-banner.active{ 
    height:576px; 
} 

.persona-banner.active img { 
    margin-top:0; 
} 

である場合210

とスクリプトで、私たちはそのheight

$('.persona-banner').click(function() { 
    $(this).toggleClass('active'); 
}); 

を変更します div.persona-bannerから activeクラスを切り替えます

Answer 2

を

誰が助けることができれば、それが追加または同時にそれらの両方を削除し、これら二つのクラスの間で交換していません。

はまた、第二paramが唯一の真または偽することができない1000

http://api.jquery.com/toggleclass/