jquery 缓动图像

Question

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

• 我设置了 position:absolute 和 width: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