Question

我有一个简单的动画：

$(function () {
    $(".galleryButtonLeft").mousedown(function(){
        $("#theGallery").animate({ 
              marginLeft: "-=300px",
        }, 1000 );
    });
});

图库仅为div position:relative。

没什么好看的：

         <div style="position:relative">
              <img/>
         </div>

当我点击我的galleryButtonLeft将其移动到300px左侧时，如果我的浏览器未最大化，页面会立即显示在顶部并滚动到我的图库所在页面的中间位置。我希望页面保持原样，而不是每次单击按钮时都跳到顶部。我该怎么做？

Answer 1

如何添加

/*...*/mousedown(function(e){e.preventDefault(); /*...*/

或

$(".galleryButtonLeft").click(function(e){e.preventDefault();});

我认为问题可能是您的触发器（.galleryButtonLeft）是 a 元素，其href属性设置为以#开头的内容这样，当你点击链接时，浏览器栏中的哈希就会改变，使浏览器跳起来。

Answer 2

我假设.galleryButtonLeft元素是将href属性设置为哈希（#）的链接。 return false或event.preventDefault()取消链接的默认行为：

$(function () {
    $(".galleryButtonLeft").mousedown(function(){
        $("#theGallery").animate({ 
            marginLeft: "-=300px"//notice I removed the trailing comma here, it'll come back to haunt you if you don't (some browsers throw errors for these)
        }, 1000 );
     }).click(false);//this returns false for any click event for the/these element(s), stopping the default behavior of the element(s)
});

在jQuery事件处理程序中返回false与调用event.preventDefault()和event.stopPropagation()相同。

如果您想使用event.preventDefault()而不是返回false，那么您必须传入匿名函数（事件处理程序）中的event对象：

$(function () {
    $(".galleryButtonLeft").mousedown(function(){
        event.preventDefault();
        $("#theGallery").animate({ 
            marginLeft: "-=300px"//notice I removed the trailing comma here, it'll come back to haunt you if you don't (some browsers throw errors for these)
        }, 1000 );
    }).click(function (event) {
        event.preventDefault();
    });
});

请注意，您可以在事件处理程序中的任何位置调用event.preventDefault()，但是返回false必须是最后调用的东西，因为它将停止执行事件处理程序。

jQuery动画的奇怪行为

2 个答案: