Erweitern und reduzieren ein div

Question

Ich habe eine Liste von Artikeln & sie halten Bilder, jedes Bild ist 800W x 600 H. Die ursprüngliche div Höhe ist 800 W x 300 H. Ich fand heraus, wie das div zu erweitern, wenn es ist geklickt, aber ich möchte wissen, wie Sie es ausblenden, wenn Sie es angeklickt haben, während es bereits erweitert ist. Im Moment i erweitert gerade die div noch weiter

$('.expand').bind('click', function() { 
    var currHeight = $(this).css('height').replace(/px/,''); 
    currHeight = currHeight * 1; 
    var newHeight = currHeight + 500; 
    $(this).animate({ 
    height: newHeight 
    },1000); 

}); 

eine Idee, wie man ein if else statement schaffen, das sagen würde, WENN die div bereits erweitert werden dann auf Klick kollabieren, oder wenn die div Zusammenbruch ist, dann erweitern, um # von px.

Answer 1

Sie können die aktuelle Höhe und Zweig erkennen:

$('.expand').bind('click', function() { 
    var $this = $(this), 
     height = $this.height(); 
    if (height > 500) { 
    height -= 500; 
    } 
    else { 
    height += 500; 
    } 
    $this.animate({ 
    height: height 
    },1000); 
}); 

ich ein paar andere Dinge in dort getan haben. Sie können height statt css('height') verwenden, um den Wert ohne Einheiten zu erhalten, und keinen Bedarf für den * 1 Trick. Ich habe auch das $(this)einmal gemacht und es wiederverwenden, da es mehrere Funktionsaufrufe und eine Zuordnung beim Aufruf der $() Funktion gibt. (Es spielt hier keine Rolle, aber es ist eine gute Angewohnheit, wenn man sie nicht länger einsperrt, als Sie [über eine Schließung oder so] meinen.

Alternativ können Sie sich daran erinnern, dass Sie haben getan, um es eine andere Art und Weise (mit dem data Feature):

$('.expand').bind('click', function() { 
    var $this = $(this), 
     height = $this.height(), 
     expanded = $this.data('expanded'); 
    if (expanded) { 
    height -= 500; 
    } 
    else { 
    height += 500; 
    } 
    $this.data('expanded', !expanded); 
    $this.animate({ 
    height: height 
    },1000); 
}); 

Oder kombinieren sie diejenigen, die die ursprüngliche Höhe es im Falle zu speichern, indem etwas anderes beeinflusst wird:

$('.expand').bind('click', function() { 
    var $this = $(this), 
     height = $this.height(), 
     prevHeight = $this.data('prevHeight'); 
    if (prevHeight) { 
    height = prevHeight; 
    $this.data('prevHeight', undefined); 
    } 
    else { 
    $this.data('prevHeight', height); 
    height += 500; 
    } 
    $this.animate({ 
    height: height 
    },1000); 
}); 

sie Ihre Wahl!

Answer 2

würde ich CSS verwenden, um die Höhe des div in beiden ursprünglichen und erweiterten Versionen zu setzen, und dann, wenn das div geklickt wird, eine Klasse wechselte die Höhe zu ändern:

/* CSS for the height */ 
.expand { 
    height: 300px; 
} 
.expand.expanded { 
    height: 600px; 
} 

und dann in dem Klick Verfahren, nur:

$(this).toggleClass("expanded"); 

Answer 3

Sie die .height() zum Zeitpunkt des click Ereignisses und .animate() der height+= oder -= entsprechend überprüfen (somethi ng .animate() unterstützt), wie folgt aus:

$('.expand').click(function() { 
    $(this).animate({ 
    height: $(this).height() > 300 ? "+=500px" : "-=500px" 
    }, 1000); 
}); 

Oder verwenden .toggle(), wie folgt aus:

$('.expand').toggle(function() { 
    $(this).animate({ height: "+=500px" }, 1000); 
}, function() { 
    $(this).animate({ height: "-=500px" }, 1000); 
}); 

Answer 4

Ein paar Hinweise mit jQ:

.click(function(){}) 
.css({height: "300*1px"}) // Why are you multiplying Anything by ONE?! 

Und können Sie verwenden

if($(this).css("height") == "300px") { 
Do stuff 
} else { 
Do other stuff 
} 

E dit: Aber andere Optionen oben sind viel besser.

Answer 5

Reines JQuery, überprüfen Sie die Dokumentation Jquery Animate

$("#clickme").click(function() { 
    $("#book").animate({ 
    height: "toggle" 
    }, { 
    duration: 5000, 
    specialEasing: { 
     height: "linear" 
    }, 
    complete: function() { 
     //DO YOUR THING AFTER COMPLETE 
    } 
    }); 
});