Vous cherchez à condenser mon Jquery Script d'animation
Question
J'ai un script d'animation jquery qui fonctionne bien, cependant, je me sens comme il y a un moyen de réduire les frais généraux d'ensemble pour le script. Voici un lien vers la page de développement:
http://dev.abinstallations.com
Il y a deux parties à l'animation, et ces animations s'appliquent à six éléments individuels div. Un script séparé est appliqué à chaque élément. Par exemple:
//First
$("#first_flip").hide();
$("#first_button_show").click(function(){
$('#first_flip').animate({
opacity: 'toggle',
top: '+=524',
height: 'toggle'}, 600, function() {
// Animation complete.
});
});
$("#first_button_hide").click(function(){
$('#first_flip').animate({
opacity: 'toggle',
top: '-=524',
height: 'toggle'}, 400, function() {
// Animation complete.
});
});
//Second
$("#second_flip").hide();
$("#second_button_show").click(function(){
$('#second_flip').animate({
opacity: 'toggle',
top: '+=524',
height: 'toggle'}, 600, function() {
// Animation complete.
});
});
$("#second_button_hide").click(function(){
$('#second_flip').animate({
opacity: 'toggle',
top: '-=524',
height: 'toggle'}, 400, function() {
// Animation complete.
});
});
... et ainsi de suite pour les quatre autres éléments. Est-il un moyen condensé pour y parvenir?
La solution
Vous pourriez tirer comme fonction:
Hook("first");
Hook("second");
function Hook( id )
{
$("#" + id + "_flip").hide();
$("#" + id + "_button_show").click(function(){
$("#" + id "_flip").animate({
opacity: 'toggle',
top: '+=524',
height: 'toggle'}, 600, function() {
// Animation complete.
});
});
$("#" + id + "_button_hide").click(function(){
$("#" + id + "_flip").animate({
opacity: 'toggle',
top: '-=524',
height: 'toggle'}, 400, function() {
// Animation complete.
});
});
}
Ou même faire la fonction prendre plusieurs paramètres et boucle sur eux.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow