0

私はiPhoneのようなスライダーに取り組んでいます。<input type="range">スライド用のボタン付きタグです。ボタンをエンドロック画像に移動するとき、ボタンの画像をロック解除するように変更する必要があります。このために、ボタンの背景をロックアイコン付きの画像からロック解除アイコン付きの画像に変更しています(両方とも1つのスプライト画像)。このように: $('.btn').css({'background-position': '-62px -104px'}); しかし、何らかの理由で画像が変化するだけでなく、右にスライドして消え、代わりに左側から新しい画像が表示されます。奇妙なアニメーション効果。そして、私はこの奇妙な行動の理由を見つけることができません. 誰かが私にそれがなぜなのか、私に何ができるのか説明できますか? よくわかりませんが、おそらく役立つでしょう: スライダーは、通常の jQuery の代わりに Zepto js を使用します。

4

2 に答える 2

2

.btn要素でcssトランジションがアクティブになっているようです。これにより、背景画像がスライド効果で遷移します。

次のcssを要素に追加してみてください。

.btn {
    -webkit-transition: none;
       -moz-transition: none;
         -o-transition: none;
            transition: none;
}

コードの他の部分がアクティブな遷移に依存している場合、これが意図しない結果をもたらす可能性があることに注意してください。

詳細については、こちらをご覧くださいhttp://www.w3.org/TR/css3-transitions/#transition-shorthand-property

于 2013-01-29T10:35:49.053 に答える
1

たとえば、これを試してください：

$('.btn').css({'background-position': 'old position'}).hide();
$('.btn').css({'background-position': 'new position'}).show();
于 2013-01-29T10:34:23.157 に答える