jquery animation and .offset

jquery animation and .offset

本文关键字:offset and animation jquery      更新时间:2023-09-26

基本上我有一张780px长的图片,我有一个窗口,你一次只能看到390px。有左箭头和右箭头,所以你可以往一个方向滚动,然后往另一个方向滚动。我希望箭头被禁用,一旦你达到在0px或-780px图像的结束。我尝试了以下代码,只是为了看看我是否在正确的方向,但是它只有与">"符号一起工作,我需要它与"=="一起工作:

$(function() {
    $(".big-fwd img").click(function() {
        var offset = $(".wrap-nga").offset();

        $(".wrap-nga").animate({
            left: "-=390px"
        })
        if (offset > "-780px") {
            alert("hello");
        }
    });

第二个问题是,当我编写我真正想要的代码而不是警报时,什么都没有发生:

$(function() {
    $(".big-fwd img").click(function() {
        var offset = $(".wrap-nga").offset();

        $(".wrap-nga").animate({
            left: "-=390px"
        })
        if (offset > "-780px") {
            $(".big-fwd img").removeAttr();
        }
    });

我真的很茫然。我试过"位置"而不是"偏移",但这不是问题。任何帮助都太好了。你也可以通过访问http://www.lieslswogger.com并点击图库中的其中一张图片来更好地了解我在做什么。谢谢你! !

我认为你的比较问题是由于$.offset()的结果是一个对象,而不是一个值。

从http://api.jquery.com/offset/

.offset()返回一个包含top和left属性的对象。

你可能想使用偏移量。在你的情况下是左边。

希望有帮助!

在动画之前进行偏移检查。在这种情况下,您还需要比较不等式的数值。

$(".big-fwd img").click(function(){  
    var offset = $(".wrap-nga").offset();
    if(offset.left < 780)
        $(".wrap-nga").animate({ left: "-=390px" })
});

同样在背面.big-back img:

if(offset.left > 0) // proceed with animation

确保关闭函数。应该是:

$(function() {    
    $(".big-fwd img").click(function() {
        var offset = $(".wrap-nga").offset();
        $(".wrap-nga").animate({
            left: "-=390px"
        }) if (offset > "-780px") {
            $(".big-fwd img").removeAttr();
        }
    });
});