1

私はjQueryが初めてなので、ここで私と一緒に働いてください。:)

【サイト画像】http://imgur.com/zx803Ct

だから私はカーソルの相互作用でアニメーション化するためにここにボトルを持たせようとしています.

目標:ホバーした画像を前景に表示し、残りの画像を背景に縮小します。

望ましくない結果:コードはすべてのボトルを無条件で縮小しているように見えます。「if、then、else」セクションで問題が発生しているようです。

プロセス：

「mouseEntered」要素を保存し、ボトルごとに実行し、一致するかどうかを確認し、効果を適用します。

コード：

 $(".sauce_bottle").mouseenter( function(){
        var $active = $(this); //The "entered" image

        //For each (div) bottle, check if "entered", apply effects
        $('.sauce_bottle').each( function(){
            if ( $active == $(this) ) {
            //Shrink
                alert($active.attr("alt"));
                $(this).animate({
                    height: "230px",
                    width: "70px",
                    opacity: ".70"},
                    150);
            } else {
            //or Enlarge
                $(this).animate({
                height: "279px",
                width: "85px",
                opacity: "1"},
                150, function(){});
            }
        });
    });

コンセプト（スコープ）が不足している場合、またはこれを行う別の方法があれば、それは素晴らしいことです!

みんなありがとう！:)

4

1 に答える 1