Hjälp med animering i jQuery

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 samma gång. Har testar med animatefunktion, men då blir länken "Testar" som en toggle och det vill jag inte.

Tacksam för svar!

fråga2: Ja, ser inga större problem att göra det eller att göra en egen animation för det, gäller ju bara att ha dolt så att fadeIn har något att gå ifrån.

fråga1: Är något i stil med en accordion effekt du är ute efter? Bli inte hyper lätt att lösa då man måste förstå var man är i navigeringen hela tiden och veta vilka av dina element som skall flyttas. du kan ju prova sätta margin-top till ett negativt värde (samma som boxens höjd) dock vet jag inte om det kommer rockar i alla webbläsare.

Voigt:

Om du kollar på denna sidan så är det så här jag vill göra.

http://www.makr.com/

Ok, deras källkod verkar vettigare än din (löser en hel del problem som jag ser med din kod)

Leta upp elementets offset se: http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12

var
    portfolio = {
        hoverIn: function(){
            $(this).fadeTo(360,0.30);
        },
        hoverOut: function() {
            $(this).fadeTo(360,1); 
        },
        open: function(e) {
            var el = $(this.hash).slideDown(speed),
                targetOffset = $(this).offset().top; //Get the position where the a-element is.

            $('html,body')
                .animate({scrollTop: targetOffset}, speed);

            e.preventDefault();
        }
    },
    speed = "slow";

// Portfolio
$(".bg-brown", "#portfolio")
    .hover(portfolio.hoverIn, portfolio.hoverOut)
        .find("a")
            .click(portfolio.open);
                
$('.portfolio-back').click(function(){
    $('.explore-portfolio')
        .slideUp(speed);
    return false;
});

för din scroll metod, men flytta informationen om varje "knapp" som de andra har gjort, bli betydligt enklare att visa och placera om du gör detta med server kod.

edit, du kanske skall köra $(this)parent().offset().top istället för att få den bruna boxens position.

Har pillat fram och tillbaka under dagen och har kommit fram till följande:

http://web.ndesign.se/

Är själv mycket nöjd med resultatet, tack Voigt!

Jag har dock problem med $(this).parent().offset().top; som inte vill slida 20 pixlar till, får inte till det hur jag än gör. Jag kan sätta border 20 px på divven men det känns inte okej - fusk juh ;)

Jag har en del andra frågor som jag gärna skulle vilja ha hjälp/tips med.

1. Vid klick av en div, Kan man per automatik stänga ner en redan öppen div innan man öppnar en ny?

2. Kan man på något sätt tona ner övriga rutor under tiden man är aktiv med en annan?

Tacksam för svar!

$(this).parent().offset().top - 20;

1. Ja, tror till och med jag har gett dig koder i någon av dina andra trådar.

2. Ledande fråga, men ja det skall ju gå, hämta ut alla som du inte tryckte på och tona ner dom.

Kanon med - 20, jag testade allt med 20px och inte bara 20 som tal. Där ser man!

1. Okej, får kolla på detta, återkommer i fall jag inte hittar ;)
2. Ja, en ledande fråga kan man säga, men hur kan jag hämta ut alla som jag inte tryckt på då och sedan tona ner dem?

$(".slide>a").not(this) (där this är a-elementet) så få du ju kollektion av alla element som inte är det a-element du tryckt på. i princip samma sak på din andra fråga, leta upp alla .explore-portfolio som är synliga och dölj dom.

Hur kan jag få nivoslidern att fadas in först efter det att divven slidat ner? Sen efter det vill jag fada in "close"-knappen. Det får gärna vara en liten fördröjning vid varje framtagning.

Är mycket intresserad att lära mig att ta fram divvar efter en viss tid, efter varandra.

Har inte tid att skriva all kod till dig, men animate på jquery API har ju allt du kan behöva: http://api.jquery.com/animate/ callback körs efter att en animation har körts färdigt, .quere kan du också kolla in om det kan hjälpa dig också.

Men har inte för mycket animeringar, visst det ser roligt ut de första 10ggr men om man nu besöker en sida 10ggr per dag så kommer man bli tokig att behöva vänta för att animeringar skall köras.

Hej Voigt!

Jag hade behövt din hjälp lite grann. Det här med att saker och ting fadas in efter varandra var mest en kul sak som absolut inte skulle göra det jobbigt för användaren. Inget jag prioriterar men det hade varit kul att lära sig. Jag har trixat lite fram och tillbaka men får det inte till att fungera.

Jag har ett annat bekymmer som jag nämnde ovan, när jag öppnar en div, så vill jag att tidigare divvar stängs innan den öppnar den nya. Du sa att du hjälpt mig med detta tidigare men jag hittar inget.

Mycket tacksam för svar!

Typ:

$(".slide").click( function ( )  {
    $(".explore-portfolio:visible").slideUp();
})

Ett problem med detta är offset() koden måste köras efter slideUp har körts, men det bör du kunna fixa

Får till det men det är problem med offest() som du säger.

bikic skrev:

Får till det men det är problem med offest() som du säger.

Du få bygga in den koden i din andra click event, kolla först om det finns några :visible, om det finns så kan du ju ta http://api.jquery.com/delay/

Hej igen!

La in en delay innan nivoslidern, men den vill inte riktigt fungera.

open: function(e) {

	var id = this.id.split("-")[1];

	targetOffset = $(this).parent().offset().top - 20;

    	$('html,body').animate({scrollTop: targetOffset}, "slow", function(){
			$("#"+ id).slideDown("slow");
		});
				
	$(".portfolio-slide").delay(2000).nivoSlider({
		effect:'fade',
		animSpeed:150,
		manualAdvance:true,
		directionNav:false, 
		pauseOnHover:true
	});
				
	e.preventDefault();
}

Jag vet att nivoslidern helst ska köras med hjälp av window onload. Kan det vara så att det helt enkelt inte fungerar pga detta? Detsamma gäller när jag tidigare har haft en timeoutfunktion.

<script type="text/javascript">
	$(window).load(function() {
		$('#slider').nivoSlider();
	});
</script>

nivoSlider() kör plugin:et och vad jag vet så har den absolut inget med någon animering att göra, så det är lite galet tänkt.

Vad menar du? Är inte helt med på vad du menar ;)

$(".portfolio-slide").delay(2000).nivoSlider()

läs vad delay gör, oavsett så har nivoSlider metoden inget med att den skall fadeIn, det är bara ett plugin ju.

På nivosliders hemsida har de byggt in en funktion med setTimeout() och denna fungerar endast med $(window).load(function(). Kan det vara så att jag inte får till det pga att jag inte använder mig av $(window).load(function()?

http://nivo.dev7studios.com/demos/