jquery animate オプションを使用して、スライド div の効果を実現しようとしています。親の div を上に「スライド」させることはできますが、スライダーの後ろに div を表示する際に問題が発生します。
私の問題を示すために、このjsfiddleを作成しました。
photoOptions div のコメントを外してみてください。この div を非表示にしようとしているので、親 div がスライドされたときにのみ表示されます。
<div class="photoWrapper">
<!-- <div class="photoOptions"> This is your data. </div>-->
<div class="photoHolder">
Image Here
</div>
<div class="photoMeta">More data here</div>
<div class="photoCredits">
<a href="#" class="trigger">Trigger</a>
</div>
</div>
コード
jQuery.fn.blindToggle = function(speed, easing, callback) {
var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
return this.animate({
marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h
}, speed, easing, callback);
};
$(document).ready(function(){
$(".trigger").click(function(){
$('.photoHolder').blindToggle('slow');
});
});
現在の CSS:
.photoWrapper {
width:200px;
border: solid 1px #ddd;
}
.photoHolder {
border: solid 1px #eee;
width:200px;
height:266px;
}
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
}
どうすればこれを達成できるかについて何か考えはありますか?