Domanda
Ho un'immagine, quando ho hover su di essa io sono in grado di visualizzare le frecce destra e sinistra ... quando scatto una freccia Sto cambiando l'attr origine dell'immagine utilizzando jQuery ... così io sono riuscito a cambiare le immagini sul clic sulle frecce .. Quello che voglio è, come faccio a ottenere la presentazione sensazione ... la pacca di animazione in cui le diapositive di immagini attuali destra e una nuove diapositive di immagine in da sinistra quando freccia sinistra si fa clic ... please help me con questo ... non voglio usare i plugin già esistenti ... Grazie in anticipo ...
Soluzione
Per fare questo avrei due blocchi, uno per la vecchia immagine e uno per il nuovo (entrambi con trabocco-nascosto).
posizioni di partenza:
old - normal new - right margin = width of image
animazione tick esempio ogni 0,05 secondi
old - left margin+1 new right margin-1
Fino a quando il vecchio è scivolato fuori e il nuovo è scivolato in.
Altri suggerimenti
vorrei suggerire che si utilizzano le funzionalità di jQuery animati. Guardate http://api.jquery.com/animate/ per ulteriori informazioni.
questo è un lavoro di animazione personalizzato fatto si prega di trovare il violino
$('.arrowRight').on('click', function(e) {
var currLandscape = $(this).siblings(".currImg");
var prevLandscape = currLandscape.prevAll(".hiddenImg").first();
var currDesc= $(".currDesc");
var prevDesc= currDesc.prevAll(".hiddenDesc").first();
if (prevLandscape.length == 0) {
prevLandscape = currLandscape.siblings('.hiddenImg').last();
}
if (prevDesc.length == 0) {
prevDesc= currDesc.siblings('.hiddenDesc').last();
}
prevLandscape.show("slide", { direction: "right" }, 400, function() {
currLandscape.hide("slide");
});
currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
prevDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');
currLandscape.removeClass('currImg').addClass('hiddenImg');
prevLandscape.removeClass('hiddenImg').addClass('currImg');
});
$('.arrowLeft').on('click',function(e) {
var currLandscape = $(this).siblings(".currImg");
var nextLandscape = currLandscape.nextAll(".hiddenImg").first();
var currDesc= $(".currDesc");
var nextDesc= currDesc.nextAll(".hiddenDesc").first();
if (nextLandscape.length == 0) {
nextLandscape = currLandscape.siblings('.hiddenImg').first();
}
if (nextDesc.length == 0) {
nextDesc= currDesc.siblings('.hiddenDesc').first();
}
nextLandscape.show("slide", { direction: "left" }, 400, function() {
currLandscape.hide("slide");
});
currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');
currLandscape.removeClass('currImg').addClass('hiddenImg');
nextLandscape.removeClass('hiddenImg').addClass('currImg');
});