0

アプリケーションに 2 つの div があり、それぞれに 2 つの異なる画像サイズがあります。クリックすると、それらの間でクラスを切り替える必要があります。すべて正常に動作していますが。

クラスbig_divからsmall_divへの切り替えは完全に機能しています..問題なし、画像アニメーションなし

しかし、small_div から big_div への切り替えは、現在のサイズから提案された大きなサイズへのいくつかの画像アニメーションを示しています。

アニメーションなしでクラスのインスタンス幅を変更するにはどうすればよいですか? コードは次のようになります

CSS

.big_div {
width:600px;
height:400px;
float:left;
border:1px solid #cacaca;
}

.big_div img {
width:150px;
height:100px;
float:left;
margin:10px;
}


.small_div {
width:600px;
height:400px;
float:left;
border:1px solid #cacaca;
}

.small_div img {
width:300px;
height:200px;
float:left;
margin:10px;
}

HTML

<body>
<div id="big" class="big_div"></div>
<div id="small" class="small_div"></div>
<a id="switch">Click</a>
</body>

JS

$(document).ready(function(){

$('#switch').click(function(){
        $('#big').switchClass( "big_div", "small_div",1 );
        $('#small').switchClass( "small_div", "big_div",1 );

});

});

何か案が ？

4

2 に答える 2

0

私はtoggleClassがあなたが望むものだと思います。ただし、switchClassも機能するはずです。

使用しているjQueryとjQueryUIのバージョンが原因である可能性があります。私はそれらの両方をjQuery1.8.2とjQueryUI1.8.9でテストします。それらはすべて完璧に機能します。

于 2013-01-04T05:13:38.623 に答える
0

toggleClass代わりに使用

$('#switch').click(function(){
    $('#big, #small').toggleClass("big_div small_div");
});

参照

于 2013-01-04T04:30:20.227 に答える