1

我对这段代码有这个问题。我是一个新手 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 循环一定有什么东西。

4

1 回答 1

0

如果您尝试为特定图片设置动画，则可以使用它的 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

于 2013-06-14T05:15:59.470 回答