1

このコードにはこの問題があります。私は初心者のjavascript、jQueryプログラマーで、1つの画像に焦点を合わせたままにし、他の画像をアニメーション化して小さくするコードを作成しようとしています。

コードは次のとおりです。

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 に答える