Question

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

Answer 1

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

为什么这个javascript代码没有动画并专注于一张图片？

1 个答案: