2


私は次のことを試みます:
クリックすると、divのコンテンツの高さに一致するdivの高さのサイズが変更されます(コンテンツは「overflow:hidden」を非表示にします)
、divのコンテンツは応答します(ウィンドウの幅がdivのコンテンツの高さを変更する場合を意味します)も変わります。

クリックすると、div (.video) の高さが div コンテンツ (.video-container) の高さと一致するように変更されます。

$('.video').click(function()
{
    $(this).animate(
    {
        height:$('.video .video-container').height()
    });
});

これはかなりうまく機能しますが、ウィンドウのサイズを変更すると、.video-container の高さが変わり、.video のサイズをさらに変更する必要があります。

これは私がすでに持っているすべてです：

ビデオ：

<div class="video">
    <div class="video-container">
        <div class="flowplayer">
            <video preload='none'>
                <source type="video/mp4" src="video.mp4"/>
            </video>
        </div>
    </div>
</div>

JavaScript:

$(document).ready(function()
{
    $('.video').click(function()
    { 
        $(this).animate(
        {
            height:$('.video .video-container').height()
        }); 
    });

リンクが削除されました - (解決策が見つかり、すべてが機能するようになりました)

最初の黒いコンテナーをクリックすると、それが拡張されます。その後、ブラウザーのサイズを変更すると、ビデオは小さくなりますが、コンテナーは大きいままです。これで問題が解決することを願っています。

4

1 に答える 1

1

あなたが投稿した新しい情報に基づいて、私はこれを思いつきました：

新しいフィドルの例: http://jsfiddle.net/YSqAX/4/

ネイティブ jqueryresizeは要素のサイズ変更を検出しないため、サイズ変更プラグインを使用しました。

Ben Alman jquery サイズ変更プラグイン

//animate height
$.fn.animateHeight = function (container) {
    var thisHeight = $(container).map(function (i, e) {
        return $(e).height();
    }).get();

    return this.animate({
        height: thisHeight
    });
};

$(".video").on("click", function () {
    $(this).animateHeight(".video-container");
});

$(".video").resize(function (e) {
    $(this).animateHeight(".video-container");
});
于 2013-03-31T19:45:59.077 に答える