0

Web サイトで、特定の事柄について言及しているニュース記事のリストがあります。記事を押せるようにしたいのですが、押せると画像ソースが実際の記事の画像ソースと切り替わり、画像が任意のサイズに伸びます。もう一度画像をクリックすると、元に戻るはずです。また、絶対に配置されるように設定したり、成長したときに要素を邪魔にならないようにしたりしたいと考えています。

私の最初の質問は、コードスニペットやこれの簡単な実装、または同様のものは既にあるのでしょうか? 私はそれを見つけることができませんでした。

第二に、私は自分で作成している途中であり、何らかの理由で、ページが読み込まれると、何も押されずにすべての画像が消えてしまいます. これまでの私のコードは次のとおりです...

$(".newsCover").toggle(function () {

$(this).animate({
    width: "auto",
    height: "1000px"
}, 1500);

}, function () {
    $(this).animate({
        width: "auto",
        height: "300px"
    }, 1500);

});

何が問題なのか、それを修正する方法を誰か教えてもらえますか? 私はそれが本当にばかげていると感じています...

本当にありがとう！

4

2 に答える 2

0

使用しているトグル関数は 1.8 で廃止され、1.9 で削除されました。こちらを参照してください: http://api.jquery.com/toggle-event/ v 1.9 以降では、トグル関数は単純に要素を非表示にします。

パラメーターなしの .toggle() メソッドは、要素の可視性を切り替えるだけです。

新しいトグル関数に渡すことができるパラメーターは、次の場所にあります。http://api.jquery.com/toggle/新しいトグル関数を使用すると、その中で関数を実行できません.animate()。やろうとしていることを達成するには、次のようなことができます。

$(".newsCover").click(function() {
    if($(this).height() > 300) {
        $(this).animate({
             width: "auto",
             height: "1000px"
        }, 1500);
    }
    else {
        $(this).animate({
            width: "auto",
            height: "300px"
        }, 1500);
    }
});
于 2013-06-07T18:46:07.770 に答える
0

.animate() メソッドを使用すると、任意の数値 CSS プロパティでアニメーション効果を作成できます。

以下に示す場合を除き、すべてのアニメーション化されたプロパティは単一の数値にアニメーション化する必要があります。

http://api.jquery.com/animate/

ただし、自動の高さ/幅をハードな数値として決定することでハッキングできます。

JavaScript jQuery Animate to Auto Height

于 2013-06-07T18:29:51.810 に答える