jQuery: fadeout une image lorsque vous cliquez sur un ImageButton ASP.NET

Question

Je crée une galerie de photos dans ASP.NET. L'utilisateur peut parcourir les vignettes sur la gauche et en sélectionner une, ce qui amène une version de taille d'aperçu dans le volet droit de la page. Je voudrais fondre entre les images, de sorte que l'image actuelle disparaisse et que la suivante disparaisse. J'utilise jQuery pour fondre l'image d'aperçu après son chargement, ce qui fonctionne très bien. Malheureusement, je ne peux pas exécuter le script fadeOut avant que l'événement click n'envoie la page au serveur. Les vignettes sont des ImageButtons ASP.NET, ce qui signifie qu'elles sont <input>.

Existe-t-il un moyen de retarder la publication juste assez longtemps pour que l'image disparaisse? J'ai vu quelques astuces avec le formulaire onSubmit et setTimeout() mais cela affecterait tous les liens et boutons sur la page. Je veux retarder la publication pour les vignettes seulement.

TIA

EDIT: D'après mes recherches, et d'essayer les suggestions ci-dessous, il peut être possible de retarder le postback d'y arriver, mais ce n'est pas la meilleure approche à plusieurs niveaux. Pour obtenir une transition propre à l'évanouissement entre les images, à l'avenir, je ne ferais plus aucune publication. J'utiliserais jQuery exclusivement pour le fadeout, charger, fadein.

Answer 1

Voici la solution je:

Depuis que je suis en utilisant AJAX MS avec un UpdatePanel, je peux utiliser le gestionnaire d'événements AJAX côté client.

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(fadeOut); 

function fadeOut() { 
     if ($('.mainImage').length > 0) { 
      $('.mainImage').fadeOut('normal'); 
     } 
    } 

Cela me donne le comportement exact que je wanted- chaque fois que l'utilisateur navigue entre les vignettes, l'image disparaît, les charges, le nouveau apparaît en fondu.

CEPENDANT ...

Ce n'est pas encore idéal, car il y a une pause entre les fondus pendant que la page est postée. Cela fonctionnera pour l'instant mais à long terme, il serait préférable d'utiliser jQuery pour définir l'image de prévisualisation plutôt que les vignettes affichées en tant que ImageButtons.

Answer 2

Essayez d'ajouter une fausse déclaration à votre fonction qui gère la fadein/out ... Il faut éviter que la postback page de se produire ...

$('#<%= this.aspbutton.ClientId%>').click(function(){ 
    $('#myDiv').fadeout("slow"); 
    return false; 
}); 

Je ne sais pas ce que vous obtenez sur la PostBack où vous voudriez fondre une image, puis fondre une image. Avez-vous envisagé d'utiliser AJAX pour cela? Vous pourriez même avoir l'image de la vignette contenant les informations nécessaires dans les balises d'image pour l'image plus grande.

Jetez un coup d'œil au jQuery Lightbox plugin. J'ai implémenté ce plugin et j'ai légèrement modifié le .JS pour permettre la visualisation d'une photo à plus haute résolution en plus de la vue web. Vérifiez-le here.

Answer 3

$('#<%= this.aspbutton.ClientId%>').click(function(){ 
    var $btn = $(this); 
    $('#myDiv').fadeout("slow", function() { 
     $btn.unbind('click').click(); 
    }); 
    return false; 
});