1

ユーザーが私のWebページで「もっと見る」をクリックすると、divの高さが2倍になります(最初は300pxだった場合、現在は600pxになります)。

id をもう一度クリックすると、900 ピクセルになるので、ウィンドウをクリックするたびに 300 ピクセルずつ増加します...

http://jsfiddle.net/dKMyg/ 

// Set height of visible window
var window = 300;

// On click increase window size
$('.show-more').click(function(){

    $('.visible-window').css({
        height : window * 2
    })

});
4

4 に答える 4

2

必要なものは次のとおりです。 

// Set height of visible window
var window = 300;

// On click increase window size
$('.show-more').click(function(e){
    // Prevent the default action of the link
    e.preventDefault();

    // Animate the height, add 300px each time and easeOutBounce (for the effect)   
    $('.visible-window').animate({
        height : '+=300' // Add 300px to the current height (whatever it is)
    }, 'slow', 'easeOutBounce');

});

この JSfiddle を確認してください: http://jsfiddle.net/dKMyg/2/ (read more をクリックすると、div の高さが 300px 拡大され、必要に応じてアニメーション化されます)

リソース jQuery Easing も追加しました ( here )。

于 2013-05-17T08:56:19.357 に答える
1

.animateの代わりに使用する必要があり.css、毎回初期の高さを現在の高さに追加します。

// Set height of visible window
var visibleWindow = $('.visible-window');
var increase = visibleWindow.height();

// On click increase window size
$('.show-more').click(function(e){
    e.preventDefault();

    visibleWindow.animate({
        height : visibleWindow.height() + increase
    }, 1000);
});

http://jsfiddle.net/dKMyg/1/

e.preventDefault()リンクのデフォルト アクション (毎回ページを上に移動していた) を無効にするために を追加しました。不要な場合は削除する必要があります。

于 2013-05-17T08:53:24.203 に答える
0

jQueryUI Effects コアを含めることができれば、バウンスイージング効果が利用可能になります。他の例については、優れたjQueryUI イージングのデモ ページを参照してください。

このコード例は、相対値が与えられた.animate()単一のプロパティを変更するためにも使用します。ドキュメントから：height+=

アニメーション化されたプロパティは、相対的なものにすることもできます。先頭に += または -= の文字列を付けて値を指定すると、プロパティの現在の値に指定された数値を加算または減算することによって、ターゲット値が計算されます。

.animate()イージング関数と期間を指定することもできます。1500 ミリ秒とeaseOutBounceエフェクトを使用しました。

// On click increase window size
$('.show-more').click(function(){
    $('.visible-window').animate({
        height: '+=100'
    }, 1500, 'easeOutBounce')
    return false // stop default click action
});

デモ(デモ用に +100px 増加)

于 2013-05-17T08:56:43.050 に答える