Question

我目前有一个JavaScript应用于两个图像。该视频可在此处查看：http://www.youtube.com/watch?v=DYc8swGK5Lw 我在视频中悬停的第一张图片表现正常，但第二张图片没有。第二张图片似乎在悬停后立即应用margin-top，而不是像第一张那样过渡。这会导致浏览器在稳定性恢复之前混淆和鼠标悬停一两次。两张图片都应用了gallery_left类，但是视频中悬停的第一张图片已经应用了left4 ID。在视频中悬停的第二张图片已经应用了left7 ID。最后，这是代码。

$(function() {
var margin_top;
$('img.gallery_left').mouseover(function(){
    if($(this).attr('id') == "left4") {
        margin_top = '105px';
    } else {
        $(this).css('marginTop');
    }
    if($(this).attr('id') == "left7") {
        margin_top = '353px';
    } else {
        $(this).css('marginTop');
    }

    $(this).animate({
        borderWidth: '10px',
        width: '750px',
        height: '500px',
        marginLeft: '1px',
        zIndex: '15',
        marginTop: margin_top,
    }, 
    'default');
});

$('img.gallery_left').mouseout(function(){
    if($(this).attr('id') == "left4") {
        margin_top = '261px';
    } else {
        $(this).css('marginTop');
    }
    if($(this).attr('id') == "left7") {
        margin_top = '511px';
    } else {
        $(this).css('marginTop');
    }

    $(this).animate({
        borderWidth: '4px',
        width: '300px',
        height: '200px',
        marginLeft: '1px',
        zIndex: '0',
        marginTop: margin_top,
    }, 
    'default');
});
});

我必须将代码应用于所有其他图片，但对于初学者我只是对这两张图片做了。请帮助我，并尝试使用此代码确定问题。

Answer 1

这一行：

        $(this).css('marginTop');

什么都不做。你可能意味着这样的事情：

if(this.id == "left4") {
    margin_top = '261px';
} else if ( this.id == "left7") {
    margin_top = '511px';
} else {
    margin_top = $(this).css('marginTop');
}

这样你就是存储css属性。此外，您只需要一个if / else系列，因此您不会使用第二个系列的if覆盖第一个系列的else。

Answer 2

问题可能在if：我认为它应该像

if($(this).attr('id') == "left4") {
    margin_top = '105px';
} else if($(this).attr('id') == "left7") {
    margin_top = '353px';
} else {
    margin_top = $(this).css('marginTop');
}

Answer 3

对于第一张图片，您实际上根本没有更改margin-top（代码中的任何一点都不会更改ID为margin-top的图片的left1。正如@Dennis指出的那样，$(this).css('marginTop');什么也没做。所以事实上你的margin-top代码全面存在问题，而不仅仅是第二张图片 - 只是你实际上没有用第一张图片改变任何东西，使它看起来工作正常（我猜你预计第一张图片的margin-top为零？）。

我认为问题可能是您将'default'作为第二个参数传递给$.animate。我查看了$.animate的文档，并没有在任何地方看到'default'作为该参数的有效选项（duration参数）。相反，请尝试将其设置为fast，slow或某个数值。

JavaScript故障（可能也很简单）需要解决方案

3 个答案: