2

大きな画像をアニメーション化して、サイズを変更し、(200x116)px から始まり、クリックすると (400x232)px になり、再度クリックすると (200x116)px に戻ります。

コードへのリンクは次のとおりです。http://jsfiddle.net/edddotcom/FMfC4/1/

HTML:

<img id="imgtab" src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg">

CSS:

#imgtab {
    position:relative;
}

JavaScript:

$(document).ready(function () {
    $("#imgtab").toggle(function () { //fired the first time
        $("#imgtab").animate({
            width: "200px"
            height: "116px"
        });
    }, function () { // fired the second time 
        $("#imgtab").animate({
            width: "400px"
            height: "232px"
        });
    });
});

画像をクリックすると、小さなものから大きなものへとアニメーション化されるはずですが、変化していないようです。誰が何を変更するかを提案し、私が間違っていることを教えてもらえますか?

4

5 に答える 5

6

単にクリックで切り替えたい場合は、以下を試してください

 $(document).ready(function () {
        var small={width: "200px",height: "116px"};
        var large={width: "400px",height: "232px"};
        var count=1; 
        $("#imgtab").css(small).on('click',function () { 
            $(this).animate((count==1)?large:small);
            count = 1-count;
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="imgtab" class='small' src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg">

また

jQuery-ui ウィジェットライブラリで利用可能な期間パラメーターaddClassとremoveClass関数を使用することもできます。すなわち

$(document).ready(function () {
    var count=1; 
    $("#imgtab").on('click', function () {
        var $this = $(this);
        $this.removeClass('small, large',400);
        $this.addClass((count==1)?'large':'small',400);
        count = 1-count;
    })
});

where.smallおよび.largecss クラスは次のとおりです。

.small{
    width:200px;
    height:116px;
}
.large{
    width:400px;
    height:232px;
}

この作業フィドルを参照してください。

注: jQuery UI ライブラリの参照も必要になります。duration パラメータが原因で、addClassそこremoveClassでのみ使用できます。

于 2013-04-19T18:22:46.197 に答える
3

メソッドで引数として渡されたオブジェクト プロパティ間にカンマがありませんanimate。

$(document).ready(function () {
    $("#imgtab").toggle(function () { //fired the first time
        $("#imgtab").animate({
            width: "200px",//HERE
            height: "116px"
        });
    }, function () { // fired the second time 
        $("#imgtab").animate({
            width: "400px",//HERE
            height: "232px"
        });
    });
});

例: http://jsfiddle.net/dFU9P/

于 2013-04-19T18:14:35.037 に答える
2

jQuery の animate を使用せずに、代わりに CSS アニメーションを使用して、アニメーション効果を実現する簡単な方法を次に示します。どのブラウザーをサポートする必要があるかはわかりませんが、さまざまな方法でそれがどのように行われるかを見るのは良いことです。

HTML:

<img id="imgtab" src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg">

CSS:

img {
    height: 200px;
    width: 116px;
    -webkit-transition: all .4s ease-in; //added vendor prefixes for older browsers
    -moz-transition: all .4s ease-in; //first parameter decides what properties to animate
    -m-transition: all .4s ease-in; // second is duration
    -o-transition: all .4s ease-in; //3rd is the timing-function
       transition: all .4s ease-in;
}

.fullSize {
    height: 400px;
    width: 232px;
}

jQuery:

$('#imgtab').on('click', function(e) {
    $(this).toggleClass('fullSize');
});

そして、ここにフィドルhttp://jsfiddle.net/AtQwM/があります。さまざまなエフェクトのトランジション パラメータをいじってみてください。

于 2013-04-19T18:37:17.773 に答える
0

Toggleは 1 つのイベントに対して 2 つの状態を提供しますが、それを使用するアニメーションはすべて になりdisplay:noneます。したがって、画像の状態を制御するには、変数を使用して独自のトグル メカニズムを使用する必要があります。

$(document).ready(function() {
    var imgSmall = false

    $('#imgtab').on('click',function() {
        $("#textab").toggle(20);
        if ( imgSmall ) {
            $('#imgtab').animate({width:"400px",height:"232px"});
            imgSmall = false
        } else {
            $('#imgtab').animate({width:"200px",height:"116px"});
            imgSmall = true
        }
    });
});

http://jsfiddle.net/FMfC4/3/

于 2013-04-19T18:28:18.460 に答える