jquery - jquery easing 图片

Question

我有一个垂直画廊。当您将鼠标悬停在图像上时，它会从左侧滑出 300 像素，然后滑回。

• 我设置了一个位置：绝对和宽度：400px。我希望图像垂直堆叠。这是在这种情况下正确的做法吗？
• 如何使 jquery easeInSine/ease 工作？

谢谢！

CSS

#gallery{
   display:block;
   width:400px;
   position:absolute;
   left: -5px;
}

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="_js/jquery.easing.1.3.js"></script>
<script>
    $(document).ready(function () {
            $('.slidingimage').hover(
                function () {
                    $(this).stop().animate({
                            left: '-5px',
                        },
                        500,
                        'easeInSine'
                    ); // end animate
                },
                function () {
                    $(this).stop().animate({
                            left: '300px',
                        },
                        600,
                        'easeOutBounce'
                    ); // end animate
                ); // end hover
            }); // end ready
</script>

<div id="gallery">
    <img class="slidingimage" src="images/gnu.jpg" height="200px" width="250px">
    <img class="slidingimage" src="images/tiger.jpg" height="200px" width="250px">
    <img class="slidingimage" src="images/black_rhino.jpg" height="200px" width="250px">
    <img class="slidingimage" src="images/cape_buffalo.jpg" height="200px" width="250px">
</div>

Answer 1

我能够弄清楚。但是，它并没有像我想要的那样工作。如果有人对改进功能有建议。那将是真棒。谢谢！

$(document).ready(function() {
    $(".slidingimage").hover(function() {
    $(this).animate( {"left": "+=300px"}, 2000, "easeInSine" ); 
    });

    $(".slidingimage").hover(function() {
    $(this).animate( {"left": "-=300px"}, 2000, "easeOutBounce" ); 
    });
});//end of document ready