1

JQuery を使用した単一の HTML 要素の制御に関する以前の投稿の後、私は大丈夫だと思っていましたが、やや混乱した立場に陥ることはまだありません。

個々の要素を渡さずに関数を機能させることができましたが、ページ上のすべてのアニメーションを 1 つの画像ロールオーバーでトリガーしたくありません。

スクリプトとともに、以下に JSFiddle リンクを提供します。

        <!-- slide image -->
    <script>

        function slideImage(elem)   

        {

            //Hide both the hover and overlay divs
            ".galleryHover".hide();             

            ".galleryOverlay".hide();


            //When the container div is hovered over trigger these events...
            $(".galleryContain",$(elem).parent()).hover(function()
            {
                //Slide .galleryHover along z-axis from -400 to 0 so its visible at a speed of 0.6s
                $(".galleryHover",$(elem).parent()).stop().show().css({ "left" : "-400px"}).animate({ left : 0}, 600);

                //Fade in the background overlay in 0.75s to 0.9 opacity
                $(".galleryOverlay",$(elem).parent()).stop().fadeTo(750, 0.9)

                //On mouse out...
            }, function(){

                //Slide .galleryHover +450 on the z-axis to provide illusion of sliding off the other way.
                $(".galleryHover",$(elem).parent()).stop().animate({ left : 450}, 750)

                //Over the course of 1 second, fade the background to 0 opacity.
                $(".galleryOverlay",$(elem).parent()).stop().fadeTo(1000,0)

            });

        });

    </script>

DIV がホバーされたときにこのイベントをトリガーしようとしています (この方法でイベントをトリガーできると確信しているため、これは間違っていると思います)

                <!-- OBJECT TO CONTAIN 1 GALLERY ITEM -->
                <div onhover="slideImage(this);" class="galleryContain">

                    <div class="galleryOverlay">

                    </div>

                    <div class="galleryHover">

                        <h1>Cool hovering slide effect!</h1>

                         <a href="#" onhover="slideDiv(this);"> <p class="blueText">08/03/2013 - ESPN Spoof for HP :</p> </a>

                    </div>  

                </div>      <!-- END FIRST ITEM -->

JSFiddle はここにあります: http://jsfiddle.net/w3RqG/2

このバージョンは、マウスオーバーですべての要素をターゲットにしてアニメーション化するため、機能することに注意してください

どんな助けでも大歓迎です

よろしく

アレックス。

4

1 に答える 1

2

変数をホバーにスコープして、正しいホバーとオーバーレイ要素をターゲットにします。あなたの例ではcontent、すべての「.galleryHover」に割り当てています。ホバー機能内に移動させて を指定すること.find()で、要素内でその1つだけを検索します。

更新されたjsFiddle

$(document).ready(function(){  
    $('.galleryOverlay, .galleryHover').hide()
    $(".galleryContain").hover(function(){
        var $this = $(this),
            $content = $this.find('.galleryHover'),
            $overlay = $this.find('.galleryOverlay');

        $content.stop().show().css({ "left" : "-400px" }).animate({ left : 0}, 600);
        $overlay.stop().fadeTo(750, 0.9) 
        } ,function(){
        var $this = $(this),
            $content = $this.find('.galleryHover'),
            $overlay = $this.find('.galleryOverlay');

            $content.stop().animate({left : 450}, 750)
            $overlay.stop().fadeTo(1000, 0)
        });
});

(コメント消してすみません)

于 2013-03-12T19:54:43.493 に答える