nordi
Erfahrenes Mitglied
Hi, ich hab ein Problem mit einer Ajax-Load Funktion und animate. Inhalt wird via Klick aus einer externen html-Datei geladen. Dabei soll sich der Div-Container, in dem der Inhalt geladen wird sich automatisch in der Höhe des Inhalts anpassen. Ich habe da ein Skript auf css-tricks (http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/) gefunden und probiert es in meine Funktion einzubauen, leider ohne Erfolg. Könnt ihr mir vllt einen Tipp geben, wo der Fehler liegt?
Code:
$(document).ready(function() {
jQuery.fn.animateAuto = function(prop, speed, callback){
var elem, height, width;
return this.each(function(i, el){
el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
height = elem.css("height"),
width = elem.css("width"),
elem.remove();
if(prop === "height")
el.animate({"height":height}, speed, callback);
else if(prop === "width")
el.animate({"width":width}, speed, callback);
else if(prop === "both")
el.animate({"width":width,"height":height}, speed, callback);
});
}
$('.more').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href');
if ($('#ajax').is(':visible')) {
$('#ajax').css({ display:'block' }).animateAuto({ 'height', 1000 }).empty();
}
$('#ajax').css({ display:'block' }).animateAuto({ 'height', 1000 },function() {
$('#ajax').html('<img id="loader" src="images/ajax-loader.gif">');
$('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' });
$('#ajax').load('slide-fade-content.html ' + href, function() {
$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': 'rgb(253,253,175)' });
});
});
});
});