--- title: "Hjälp med animering i jQuery" type: "forum-thread" url: "https://www.webforum.nu/amne/javascript/186644-hjälp-med-animering-i-jquery/page2" topic: "JavaScript" topic_url: "https://www.webforum.nu/amne/javascript" author: "bikic" published: "2011-04-12T12:51:28.000Z" updated: "2011-04-14T13:44:51.000Z" replies: 39 views: 2744 page: 2 pages: 2 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/186644-hjälp-med-animering-i-jquery" --- # Hjälp med animering i jQuery _Sida 2 av 2._ ## #21 — voigtann1, 2011-04-14T11:19Z Det är bara för att nästa image slider skall starta 1 sekund senare än den övre. Permalänk: https://www.webforum.nu/p/2274349 ## #22 — bikic, 2011-04-14T11:23Z 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. Permalänk: https://www.webforum.nu/p/2274350 ## #23 — voigtann1, 2011-04-14T11:24Z > 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. Permalänk: https://www.webforum.nu/p/2274351 ## #24 — bikic, 2011-04-14T11:37Z Hur kan jag lösa det så som jag vill ha de då? Jag kan ju sätta ett unikt id på nivoslidern. Permalänk: https://www.webforum.nu/p/2274352 ## #25 — voigtann1, 2011-04-14T11:40Z 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? Permalänk: https://www.webforum.nu/p/2274353 ## #26 — bikic, 2011-04-14T11:43Z 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 Permalänk: https://www.webforum.nu/p/2274354 ## #27 — voigtann1, 2011-04-14T11:49Z 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? Permalänk: https://www.webforum.nu/p/2274355 ## #28 — bikic, 2011-04-14T12:11Z Jan kan skissa med bilder och ladda upp, så förstår du vad jag är ute efter. Permalänk: https://www.webforum.nu/p/2274356 ## #29 — bikic, 2011-04-14T12:21Z Nu la jag även till ett ID-nummer på nivoslidern så att den bara triggar en slide åt gången. Permalänk: https://www.webforum.nu/p/2274363 ## #30 — voigtann1, 2011-04-14T12:24Z > **[bikic skrev:](https://www.webforum.nu/p/1533200)** > > 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. Permalänk: https://www.webforum.nu/p/2274365 ## #31 — bikic, 2011-04-14T12:24Z Såg du bilden! Permalänk: https://www.webforum.nu/p/2274366 ## #32 — voigtann1, 2011-04-14T12:27Z 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%; > } > ``` Se: Permalänk: https://www.webforum.nu/p/2274368 ## #33 — bikic, 2011-04-14T12:30Z Jag har det i min bakgrund och som jag nämnt tidigare så fungerar det inte använder mig av $(window).load(function(). Permalänk: https://www.webforum.nu/p/2274371 ## #34 — voigtann1, 2011-04-14T12:34Z 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. Permalänk: https://www.webforum.nu/p/2274375 ## #35 — bikic, 2011-04-14T13:18Z 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! ;) Permalänk: https://www.webforum.nu/p/2274384 ## #36 — voigtann1, 2011-04-14T13:23Z > **[bikic skrev:](https://www.webforum.nu/p/1533221)** > > 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. Permalänk: https://www.webforum.nu/p/2274385 ## #37 — bikic, 2011-04-14T13:24Z 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. Permalänk: https://www.webforum.nu/p/2274386 ## #38 — voigtann1, 2011-04-14T13:28Z > **[bikic skrev:](https://www.webforum.nu/p/1533223)** > > 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. Permalänk: https://www.webforum.nu/p/2274387 ## #39 — voigtann1, 2011-04-14T13:32Z 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. Permalänk: https://www.webforum.nu/p/2274389 ## #40 — bikic, 2011-04-14T13:44Z Så snyggt! Tack för hjälpen! Du e kung!!! Permalänk: https://www.webforum.nu/p/2274391 --- Tråden på webben: https://www.webforum.nu/amne/javascript/186644-hjälp-med-animering-i-jquery/page2 Föregående sida: https://www.webforum.nu/amne/javascript/186644-hjälp-med-animering-i-jquery.md