2012-04-02 62 views
3

jQueryを使用して画像を非表示にするようにしています。私は.hide()機能を使用しています。私はそれを非表示にしなければならない画像を含むdivに適用しています。 何らかの理由で動作しません。私はcreated a fiddleです。jQueryアニメーション - 画像を左から右に表示する

animateを使用すると、1秒で画像が右から左に見えるようになりますか?つまり、幅を0から最大値にアニメーション化しますが、イメージは左から右に表示されるようにする必要があります。

答えて

2

あなたは正しいsyntax.missingを使用していませんでした)。各機能の終了時に

$(document).ready(function() { 
    $('#animate').click(function() { 
     $('#myimage').animate({width: 'hide'},1000); 
    }); 
}); 
+0

http://jsfiddle.net/bobbyfrancisjoseph/rAqcP/34/ このフィドルをご覧ください。アニメーションが右から左に起こるようにしたい。 –

1

作業中のjsFiddle hereが見つかります。ポイントの

カップル:あなたのオリジナルフィドルで

  • は、あなたが使用することを忘れてしまった)を終了 - 隠れが機能しなかった理由です。
  • アニメーションを実現するために、私はblind jQueryイージングを使用しました。これ(および他のイージング)を使用するには、jQuery UIライブラリを参照する必要があります(私がフィドルでやっているように)。

    $(document).ready(function() { 
        $('#animate').click(function() { 
         $('#myimage').toggle('blind', { direction: 'horizontal' }, 1000); 
        }); 
    }); 
    
    :私は左に少しチェックボックス:)

は、念のために、私はまた、フィドルからコードを掲示していますことをチェックさまで効果が動作しない理由を把握するために私にしばらく時間がかかりましたここ

+0

ページの読み込み時に画像を非表示にして、ボタンを押したときに左から右にアニメーション表示する方法を教えてください。それは私の正確な要件です。 –

+0

http:// jsfiddle。net/bobbyfrancisjoseph/rAqcP/34/ このフィドルをご覧ください。私はanmimationが右から左に起こることを望む。 –

1

は、あなたが望むものである:あなたが必要として

http://jsfiddle.net/rAqcP/27/

は、アニメーションを変更してください。

〜K

+0

ページの読み込み時にイメージを非表示にしてから、ボタンを押したときに左から右にアニメートする方法を教えてください。それは私の正確な要件です。私がアニメーション化する必要があるのは、視点でありx位置ではありません。 –

+0

http://jsfiddle.net/bobbyfrancisjoseph/rAqcP/34/ このフィドルをご覧ください。私はanmimationが右から左に起こることを望む。 –

1

私はリサイズ時に画像が奇妙になりますので、あなたが幅をアニメーション化すべきとは思いません。あなたはこのように欲しいものを達成することができます

  • overflow: hiddenposition: relativeにコンテナ(DIV番号のMYIMAGE)を設定します。オーバーフローを非表示にする容器の外に左に画像を移動することができます
  • position: absolute
  • に画像を設定し、に左に画像を移動することが
  • バックゼロ
  • から leftプロパティをアニメーション

DEMO

DEMO (initial state with css)

+0

ページの読み込み時にイメージを非表示にしてから、ボタンを押したときに左から右にアニメートする方法を教えてください。それは私の正確な要件です。私がアニメーション化する必要があるのは、x-位置ではなく、視認性です。 –

+0

私はフィドルを変更しました。単にclickイベントの代わりにdomreadyに画像の 'left'プロパティを設定してください。イメージのサイズを知っている場合は、CSSで直接設定することもできます(javascriptではなく)。 –

+0

http://jsfiddle.net/bobbyfrancisjoseph/rAqcP/34/ このフィドルをご覧ください。私はanmimationが右から左に起こることを望む。 –

関連する問題