Question

在我之前关于使用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

请注意，此版本的目标是在鼠标悬停上为所有元素设定目标并动画

非常感谢任何帮助

此致

亚历。

Answer 1

悬停的范围变量，因此您可以定位正确的悬停＆amp;叠加元素。在您的示例中，您将content分配给所有'.galleryHover'。通过在悬停函数中移动它并指定.find()，您只搜索元素中的那个。

Updated 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)
        });
});

（抱歉擦拭你的评论）

Javascript图像滑动

1 个答案: