为什么不'这个javascript代码动画和聚焦在一个图片工作

Why doesn't this javascript code to animate and focus on one picture work?

本文关键字：一个 工作 聚焦 这个 javascript 动画 代码 为什么不      更新时间：2023-09-26

我对这段代码有这个问题。我是一个新手javascript,jQuery程序员，并试图使一个代码，使一个图片保持聚焦和其他动画小。

代码是这样的:

var picHeight = '75';
var picWidth = '100';
var picAmount = 12;
var prev = 0;
var next = 0;
var picNr = '0';
function animatePictures(picNr) {
$('#pic'+picNr).animate({
    height: picHeight+'px' ,
    width: picWidth+'px'
},500);
}
function animateSidePics(prev,next) {
if ( next>=picAmount+1 ) { }
else {
    var h=picHeight;
    var w=picWidth;
    for ( var i=next; i<=picAmount; i++ )
    {
        h=h-(h*0.3);
        w=w-(w*0.3);
        $('#pic'+i).animate({
            height: h+'px' ,
            width: w+'px'
        },500);
    }
}
if ( prev==0 ) {  }
else {
    var hh=picHeight;
    var ww=picWidth;
    for ( var i=prev; i>=1; i-- )
    {
        hh=hh-(hh*0.3);
        ww=ww-(ww*0.3);
        $('#pic'+i).animate({
            height: hh+'px' ,
            width: ww+'px'
        },500);
    }
}
}
for ( var y=1; y<=picAmount; y++ ) {
$('#pic'+y).click(function() {
    animatePictures(y)
    animateSidePics(y+1,y-1)
});
}

谁能回答为什么这个代码不工作?它只使最后一张照片对焦。即使你点击了第一张图片。我猜最后一个for循环一定有问题

如果你想让一个特定的图片动起来，你可以使用它的id，但如果你想让它动态地动起来，你可以使用它的索引，这是jquery为每个生成的，例如:

var index = 1;
$('img:eq('+index+')').animate({'height':'100px','width':'100px'});

如果你想依赖于当前图像的宽度和高度，使用内部操作，例如:

.animate({'height':'-=100px','width':'+=100px'});

不要使用循环，jquery会帮你做的，你只需要找出你的选择

jsfiddle

更新:这是我认为你正在尝试做的:

$(document).ready(function(){
    $('img').animate({'height':'50px','width':'50px'},500);
    $('img').click(function(){
        $(this).animate({'height':'100px','width':'100px'},500);
        $(this).siblings('img').animate({'height':'50px','width':'50px'},500);
    });
});

jsfiddle2

相关文章：