jQuery的動畫切換高度

我使用JQuery製作一個widget的效果，即最小化和最大化的窗口小部件..jQuery的動畫切換高度

但問題是，當我點擊最小化按鈕快速的小部件崩潰..

我覺得現在的問題是，它需要中旬動畫高度在切換時其新的高度......

請幫助...

$(document).ready(function() { 
     $('.widget-minimize').click(function() { 
      toggleMinimize($(this).parents('.widget').attr('id')); 
     }); 

     $('.widget-close').click(function() { 
      closeWidget($(this).parents('.widget').attr('id')); 
     }); 
    }); 

    function toggleMinimize(widgetId) { 
     var $content = $('#' + widgetId + ' .widget-content'); 
     if ($content.height()) { 
      $content.data('oldheight', $content.height()); 
      $content.animate({height: 0}); 
      $('#' + widgetId).find('.widget-minimize').attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-maximize.png').attr('alt', 'maximize'); 
     } 
     else { 
      $content.animate({height: $content.data('oldheight')}); 
      $('#' + widgetId).find('.widget-minimize').attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-minimize.png').attr('alt', 'minimize'); 
     } 
    } 

    function closeWidget(widgetId) { 
     $('#' + widgetId).animate({ "opacity": 0, "height": 0 }, 200, "swing"); 
    }

Click here to see jsFiddle

來源

2013-04-14 Rajat Suneja

從toggleMinimize函數只是返回，如果你的內容，目前正在動畫，就像這樣：

function toggleMinimize(widgetId) { 
    var $content = $('#' + widgetId + ' .widget-content'); 
    if ($content.is(':animated')) { 
     return; 
    }

見working fiddle

來源

2013-04-14 13:42:28 Nelson

+1。我打算建議使用'complete'選項來設置[一個切換標誌來實現這個功能]（http://jsfiddle.net/UcgSW/7/），但是你的是一個更好，更乾淨的解決方案。 – Rikonator

+1這個實現的非常好的解決方案 - 我只是因爲我認爲它可能會幫助未來的人們而離開我的，但這顯然是最好的解決方案！ :) –

看看jQuery的.stop()方法和它的:animated選擇器。我經常在這種情況下使用它們來幫助我處理已經運行的動畫。

例如：

$("#element").on("click", function() { 
    if ($(this).not(":animated")) { 
     ...animation code... 
    } 
});

和

$("#element").on("click", function() { 
    $(this).stop(); 
    ...animation code... 
});

來源

2013-04-14 13:42:09

在我的情況下，小提琴工作正常，但我會建議你在高度的情況下使用max-height，所以使用max-height: 0和max-height: 80 （假設80是最大高度的多一點）。你也可以傳遞元素而不僅僅是ID。

$(document).ready(function() { 
    $('.widget-minimize').click(function() { 
     toggleMinimize($(this).parents('.widget')); 
    }); 

    $('.widget-close').click(function() { 
     closeWidget($(this).parents('.widget')); 
    }); 
}); 

function toggleMinimize(selector) { 
    var $content = $('.widget-content', selector); 
    if ($content.height()) { 
     $content.data('oldheight', $content.height()); 
     $content.animate({maxHeight: 0}); 
     $('.widget-minimize', selector).attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-maximize.png').attr('alt', 'maximize'); 
    } 
    else { 
     $content.animate({maxHeight: $content.data('oldheight')}); 
     $('.widget-minimize', selector).attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-minimize.png').attr('alt', 'minimize'); 
    } 
} 

function closeWidget(widgetId) { 
    $('#' + widgetId).animate({ "opacity": 0, "max-height": 0 }, 200, "swing"); 
}

來源

2013-04-14 13:42:21

jQuery的動畫切換高度

回答

相關問題