Question

基本上我正在尝试创建一个简单版本的“Smooth Scroll插件”，因为它对我的简单需求很重要。我对jQuery没什么经验，我想知道当鼠标在另一个元素上时你是如何使元素的左属性减少的。

$('.fade_right').live('mouseover', function() {
    //Tell code to go left
});

环顾四周，甚至是光滑滚动插件的来源，但我无法解决这个问题。任何帮助

Answer 1

您正在寻找jQuery .animate()函数。在那个页面上有一个例子，它（几乎）完全符合你的要求。

如果您希望它能够持续动画，您需要将while循环与mouseenter结合使用;只要没有调用mouseleave，你就会想要连续执行循环。使用Javascript onmouseout调用而不是mouseleave可能更容易。正如熟悉的一句话所说，我把这作为练习留给读者。

Answer 2

在Jquery中，除了动画功能之外，您还可以使用mouseenter事件。

试试这个：

$('.fade_right').mouseenter(function(){
  $(this).animate({"left": "+=50px"}, "slow");
});

希望这有帮助

Answer 3

这里有一个完整，简单的演示页面。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Simple scrolling div demo</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

        <script type="text/javascript">

            var intervalId;
            var scrollingSpeed = 16;    //the lesser, the faster; but don't use less than 16
            var pixelStep = 2;          //eventually, you want to increase this value for higher speed

            $(document).ready(function() {

                $('.fade_right').mouseenter(function() {
                    intervalId = setInterval(stepToLeft, scrollingSpeed);
                });

                $('.fade_right').mouseleave(function() {
                    clearInterval(intervalId);
                });

                function stepToLeft() {

                    var scrollingDiv = $('#scrollingDiv');
                    var x = parseInt(scrollingDiv.css('left'));
                    scrollingDiv.css('left', (x - pixelStep) + "px");

                }

            });

        </script>
    </head>
    <body>
        <div id="scrollingDiv" style="position: relative; background-color: #000; color: #fff; width: 100px; height: 100px; left: 0px;">test</div>
        <div class="fade_right" style="background-color: red; height: 50px; width: 100px;">Move to left</div>
    </body>
</html>

有关setInterval和clearInterval函数here的更多信息。

Answer 4

不使用直播，但使用hover()触发左animate调用，然后在鼠标输出时将视图重置为原始位置......

$('.fade_right').hover(function() {
    $(this).stop().animate({
        "left": $(this).width() //just a simple way to make it fluid
    }, $(this).width() * 5); //some interval based upon the width for the time.
}, function() {
    $(this).stop().animate({
        //Put it back to where it was...
        left: $(this).data("oldLeft")
    }, "fast");
}).data("oldLeft", $('.fade_right').css("left"));

在示例中正常工作，但很难说根据您的需要。

jsfiddle上的代码示例。

将元素“滑动”到左侧。就像一个滑块

4 个答案: