0

我目前有一个 JavaScript 应用于两个图像。视频可以在这里看到：http ://www.youtube.com/watch?v= DYc8swGK5Lw 我在视频中悬停的第一张图片表现正常，但是第二张没有。第二张图片似乎在悬停后立即应用边缘顶部，而不是像第一张那样过渡。这会导致浏览器在恢复稳定性之前感到困惑和鼠标悬停一两次。两张图片都应用了 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');
});
});

我还必须将代码应用于所有其他图片，但对于初学者来说，我只是对这两张图片执行此操作。请帮助我并尝试确定此代码的问题。

4

3 回答 3

0

这一行：

        $(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。

于 2013-02-24T21:51:18.953 回答
0

也许问题出在 if 中：我认为它应该类似于

if($(this).attr('id') == "left4") {
    margin_top = '105px';
} else if($(this).attr('id') == "left7") {
    margin_top = '353px';
} else {
    margin_top = $(this).css('marginTop');
}
于 2013-02-24T21:52:11.977 回答
0

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

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

于 2013-02-24T22:48:07.793 回答