Det är bara för att nästa image slider skall starta 1 sekund senare än den övre.
Hjälp med animering i jQuery
39 svar · 2 733 visningar · startad av bikic · sida 2 av 2
Frågan, av bikic
Hej alla! Jag behöver hjälp med en animering. Se följande sida: <http://web.ndesign.se/> Tanken är att när man klickar på länken "Testar" så ska första raden där alla boxar finns animeras till toppen av sidan och sedan ska "detaljerna" fram direkt under boxarna. Är ni med på hur jag menar? Fråga två: Kan man kombinera min slideDownfunktion med en fadefunktion - dvs slide och fade på en och
Läs frågan i sin helhet →Precis! Men det är ju det jag vill ha, att nivoslidern ska starta nån sekund efter det att divven slidats ner. Jag vill ta fram divven och ladda nivoslidern först efter det. Men det fungerar inte med settimeout utan en windows onload funktion.
Men det fungerar inte med settimeout utan en windows onload funktion.
Jasså? setTimeout fungera utmärkt utanför onload
Men din kod är jätte konstig:
$(".portfolio-slide").delay(2000).nivoSlider({
effect:'fade',
animSpeed:150,
manualAdvance:true,
directionNav:false,
pauseOnHover:true
});
kommer hämta alla .portfolio-slide på ditt dokument, även de som inte syns just nu, så det är ju inte önskvärt.
Hur kan jag lösa det så som jag vill ha de då? Jag kan ju sätta ett unikt id på nivoslidern.
eller så letar du upp .portfolio-slide i den specifika blocket, frågan är hur smidigt det är nästa gång du gå till samma "sida"/slide igen. har nivoSlider någon "remove" metod?
Nivoslider har en del funktioner såsom:
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
Nope, inga av dessa finns något på data:
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
randAnim: '',
running: false,
paused: false,
stop: false
};
så de få man nog leka med om man skall få det resultat du är ut efter.
edit. vad är du egentligen ute efter? skall den snurra automatiskt, för det gör den ju inte idag... vad är målet med din fråga?
Jan kan skissa med bilder och ladda upp, så förstår du vad jag är ute efter.
Nu la jag även till ett ID-nummer på nivoslidern så att den bara triggar en slide åt gången.
Nu la jag även till ett ID-nummer på nivoslidern så att den bara triggar en slide åt gången.
eller så hade du ju bara hämtat ut klassen inne i det block du animera.
Ja!
Det är ju bara att sätta det på din bakgrund:
#slider { position:relative; width:618px; /* Change this to your images width */ height:246px; /* Change this to your images height */ background:url(images/loading.gif) no-repeat 50% 50%; }
Jag har det i min bakgrund och som jag nämnt tidigare så fungerar det inte använder mig av $(window).load(function().
Lägg in nivoSlider css klassen på dina element.
$(window).load() är ju ett AJAX genväg i jquery, så det hoppas jag inte du kör alls,
mitt tips är att bara köra plugin:et en gång, sätt css klass och låt den köra Om man är snabb nog så hinner man se snurran, annars inte.
Nu fick jag till det och det ser sjukt bra ut.
Nu saknas bara funktionen för att stänga ner en öppen div när man aktiverar en ny.
Sen är jag hemma! Wohooo! ;)
Nu fick jag till det och det ser sjukt bra ut.
Nu saknas bara funktionen för att stänga ner en öppen div när man aktiverar en ny.
Sen är jag hemma! Wohooo! ;)
Det har jag ju redan skrivit:
$(".explore-portfolio:visible").slideUp();
innan du kör någon annan av dina koder för slideDown.
Jag testade det men det blev inte snyggt alls. Kolla, jag lägger upp det nu.
När du klickar på box nr 3 när du har box 1 aktiv så ser det jättebra ut. Men har du box 1 eller 3 uppe och vill aktivera box nr 6 så blir det knas.
Jag testade det men det blev inte snyggt alls. Kolla, jag lägger upp det nu.
När du klickar på box nr 3 när du har box 1 aktiv så ser det jättebra ut. Men har du box 1 eller 3 uppe och vill aktivera box nr 6 så blir det knas.
Ja men som jag sa, du måste kolla offset igen efter att animerigen är klar.
otestat:
open: function(e) {
var openContainers = $(".explore-portfolio:visible"),
that = this,
id = that.id.split("-")[1],
slideDownMethod = function ( ){
targetOffset = $(that).parent().offset().top - 30;
$('html,body').animate({scrollTop: targetOffset}, "slow", function(){
$("#"+ id).slideDown("slow", function() {
setTimeout(function(){
$("#"+ id + "-slider").nivoSlider({
effect:'fade',
animSpeed:150,
pauseTime:4000,
manualAdvance:false,
directionNav:false,
pauseOnHover:true
});
}, 1000);
});
});
};
if( openContainers.length > 0 ) {
openContainers.slideUp(slideDownMethod);
} else {
slideDownMethod();
}
e.preventDefault();
}
något i den stilen.
Känns som allt kan skrivas bättre.