Javascript图像滑动

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

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

我将在下面提供一个JSFIDLE链接以及我的脚本

        <!-- 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>

功能幻灯片图像（elem）
{
//隐藏悬停和覆盖div
“.galleryHover.hide（）”；
“.galleryOverlay.hide（）”；
//当容器div悬停在上面时，将触发这些事件。。。
$（“.galleryContain”，$（elem.parent（））.hover（函数（）
{
//滑动。Gallery在-400到0之间沿z轴悬停，使其以0.6s的速度可见
$（“.galleryHover”，$（elem.parent（））.stop（）.show（）.css（{“left”：“-400px”}）.animate（{left:0}，600）；
//以0.75秒到0.9不透明度淡入背景覆盖
$（“.galleryOverlay”，$（elem.parent（））.stop（）.fadeTo（750，0.9）
//鼠标离开时。。。
}，函数（）{
//滑动。galleryHover+450在z轴上以提供从另一方向滑出的幻觉。
$（“.galleryHover”，$（elem.parent（））.stop（）.animate（{left:450}，750）
//在1秒的时间内，将背景渐变为0不透明度。
$（“.galleryOverlay”，$（elem.parent（））.stop（）.fadeTo（1000,0）
});
});

当我的DIV悬停在上方时，我试图触发此事件（我认为这是我出错的地方，因为我确信您可以通过这种方式触发此事件）

很酷的悬停幻灯片效果！

可以在此处找到JSFIDLE：

请注意，此版本的工作原理是将鼠标悬停在上的所有元素作为目标并设置动画

任何帮助都将不胜感激

问候

---

Alex。

将变量范围设置为悬停，以便您针对正确的悬停和覆盖元素。在您的示例中，您将

内容
分配给所有'.galleryHover'。通过将其移动到hover函数中并指定
.find（）
，可以在元素中仅搜索该元素


（很抱歉删除您的评论）
您正在声明悬停范围之外的全局变量-我稍后将发布一个示例，但实际上将所有内容和覆盖更改为$（this）.find（'.galleryHover'）和$（this.find（'galleryHover'））
                <!-- 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 -->     

$(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)
        });
});