我正在尝试构建一个对 CSS 对象(.thumbposition1 -> 20)进行不透明度淡化的函数。我正在动态地为背景图像分配与其灰度对应物相同的 CSS 属性,该属性被鼠标悬停(在滚动条上)。
当我通过名称手动指定每个类时,这很有效,但是当我尝试通过引入 .each 调用来最小化事情时,会发生不好的事情: .hover 工作正常并返回被鼠标悬停的 CSS 类,但是当我去更改时(并测试)覆盖和底层图像的 CSS 属性,偏移值始终相同(顶部:0px,左侧:200px)。
我究竟做错了什么?请原谅任何愚蠢的错误/可怕的代码/等。我是菜鸟。
$(document).ready(function () {
$("img").each(function(i) {
var i = i + 1;
var iString = i.toString();
var currentThumbPositionString_gs = ".thumbpositiongs" + iString;
var currentThumbPositionString_c = ".thumbposition" + iString;
var currentThumb_gs = $(currentThumbPositionString_gs);
var currentThumb_c = $(currentThumbPositionString_c);
var thumbPos = currentThumb_gs.offset();
var thumbPos_c = currentThumb_c.offset();
currentThumb_gs.hover(function() {
currentThumb_c.css({
left:thumbPos.left,
top:thumbPos.top,
height:"auto",
width:"auto",
"z-index":"-1000000",
visibility:"visible"});
currentThumb_gs.stop().animate({"opacity": "0"}, "1500");
},
function() {
currentThumb_gs.stop().animate({"opacity": "1"}, "1500");
currentThumb_c.delay(355).queue( function() {
$(currentThumb_c).css({
height:"0",
width:"0",
visibility:"hidden"});
currentThumb_c.clearQueue();
});
});
});
});