1

在我上一篇关于使用 JQuery 控制单个 HTML 元素的帖子之后，我认为我会没事的，但我还没有再次陷入有点混乱的境地。

我能够在不传递单个元素的情况下使该功能正常工作，但是我不希望页面上的每个动画都在一次图像翻转时触发。

我将在下面提供一个 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()，您只搜索元素中的那个。

更新了 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 回答