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

我目前有一个JavaScript应用于两个图像。视频可以在这里看到：http://www.youtube.com/watch?v=DYc8swGK5Lw 我在视频中悬停的第一张图片行为正常，但是，第二张图片没有。第二张照片似乎在悬停后立即应用边距顶部，而不是像第一张那样进行过渡。这会导致浏览器在恢复稳定性之前感到困惑并将鼠标悬停并移出一次或两次。两张图片都有应用于它们的gallery_left类，但视频中第一张图片已经应用了左侧ID。视频中的第二张图片已应用了左侧ID。最后，这是代码。需要解决方案的JavaScript小故障（可能很简单）

$(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'); 
}); 
});

我必须将代码应用到所有其他图片，但对于初学者，我只是对这两张图片进行操作。请帮助我，并尝试使用此代码识别问题。

来源

2013-02-24 Ben

很难在没有看到HTML的情况下对此进行故障排除......对两个图像应用相同的Javascript函数，因此理论上两个边缘的更改时间应该相同，即使实际边距值不同。 – 2013-02-24 21:42:39

@MattB。该代码是从字面上是这样的： \t \t \t \t \t \t \t \t \t \t \t \t 等 – Ben 2013-02-24 22:15:57

这条线：

 $(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系列，因此您不会用第二个系列的else覆盖第一个系列的if。

来源

2013-02-24 21:51:18 Dennis

不改变，在视频发生的结果。 – Ben 2013-02-24 22:15:32

你确定要清除缓存吗？此外，请确保您更改mouseover/mouseout'if'语句。你可以制作一个jsFiddle而不是制作完全非互动的视频吗？ – Dennis 2013-02-24 22:26:20

也许问题出在，如果：我想应该是这样的

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-24 21:52:11 Ciack404

不，不修复它... – Ben 2013-02-24 22:23:51

对于你没有实际上改变的是margin-top在所有（在你的代码中没有的第一图像，你改变margin-top图片ID left1）。正如@丹尼斯指出的那样，$(this).css('marginTop');什么都不做。所以实际上你的margin-top代码在整个电路板上都是有问题的，而不仅仅是第二个图像 - 这只是你实际上并没有改变第一个图像的任何东西，使它看起来工作正常（我猜你期望第一个图像有一个margin-top为零？）。

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

来源

2013-02-24 22:48:07

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

回答

相关问题