✔ jQuery: .animate-value "on the flow" ändern?

[DeluXe]

Tag zusammen,

ich habe (zum Beispiel) folgende HTML-Struktur:

<div id="parent" style="position: relative; ...">
  <dirv id="inner" style="position: absolute; ...">
    <div id="child1"/>
    <div id="child2"/>
    <div id="child3"/>
  </div>
</div>

Zusätzlich gibt es noch zwei Elemente, die bei Hover das Element div#inner nach links oder nach rechts scrollen lassen. Sobald man diese Elemente mit der Maus wieder verlässt stoppt das Scrollen.
Das sieht dann z. B. so aus

$( settings.scrollable.next ).bind( 'mouseleave', function(){
	parent_inner.stop();
}).bind( 'mouseenter', function(){
	var speed = children_info[children_info.length - 1].left;
	parent_inner.animate({left: '-' + children_info[children_info.length - 1].left }, speed );
});

children_info enthält lediglich Informationen zu den einzelnen Kindern, wie z. B. Positionsangaben.

Bis hier hin kein Problem.

Was ich nun versuche zu realisieren ist, dass bei dem verlassen der Elemente, die das Srollen bewirken, nicht einfach gestoppt wird, sondern bis zum Ende des gerade "herein scrollenden" Kindes weiter gescrollt wird.
Und zwar ohne dass ein ruckeln auftritt.

Ich hoffe das war jetzt nicht zu unverständlich erklärt.

Hat da jemand eine Idee, wie man das realisieren könnte?
Man müsste eigentlich ja nur den an .animate() übergebenen Wert für das left-Attribut ändern, aber dafür fällt mir keine Lösung ein..

Danke euch schonmal.

 

[Sven Mintel]

Moin,

ich muss gestehen, so recht habe ich das Problem nicht verstanden :-(

Wenn es nich stoppen soll, warum stoppst du es dann?
Die Animation hört doch irgendwann von selbst auf, wenn sie ihr Ziel erreicht hat.

 

[DeluXe]

Dachte ich es mir doch.

Also, ich hab da mal eben was zusammen getippselt.
Ist nicht toll, nur funktionell - eben auf der Konsole fix geklimpert.

Wenn man dieses Beispiel ausführt, bekommt man einen (wahnsinnig tollen) scroller.

Bei diesem sieht man, das man so gut wie immer, wenn man aufhört zu Scrollen, den Anfang des nächster Containers sieht.
Ich möchte aber, das dieser noch komplett herein gescrollt wird - nicht nur so ein bisschen.

Mein Ansatz war nun, im mouseleave-Event einfach ein weiteres .animate() zu setzen, welches lediglich noch die paar Pixel weiter scrollt.
Nur entsteht dadurch ein kurzes Anhalten und man bekommt das Gefühl, es würde ruckeln...

Die Informationen, wo welches der einzelnen Kinder des Scrollers anfängt oder aufhört sind alle vorhanden, da muss nichts großartig berechnet werden o. ä., es geht wirklich nur um das "wie".

Ich hoffe das ist verständlicher.

Sop, und hier der besagte Code.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
div#container {
	height: 100px;
	width: 400px;
	position: relative;
	overflow: hidden;
	border: 1px solid #000;
}

div#inner {
	height: 100px;
	width: 500px;
	position: absolute;
	top: 0px;
	left: 0px;
}

div#inner div {
	height: 100px;
	width: 200px;
	position: absolute;
	top: 0px;
	text-align: center;
	border: 1px solid #ccc;
}
</style>
<script>
$(function(){
	var children_count = 15;
	var container = $( '#container' );
	var inner = $( '<div/>' )
		.attr( 'id', 'inner' )
		.width( ( children_count * 200 ) )
		.appendTo( container );

	for( var i = 0; i < children_count; i++ ) {
		$( '<div/>' )
			.css( 'left', ( i * 200 ) + 'px' )
			.text( 'div ' + ( i + 1 ) )
			.appendTo( inner );
	}

	$( '#scroll' ).bind( 'click', function(){
		return false;
	})
	.bind( 'mouseenter', function(){
		var left = parseInt( inner.css( 'width' ), 10 ) - parseInt( container.css( 'width' ), 10 );
		inner.animate({ left: '-=' + left }, ( children_count * 200 ) );
	})
        .bind( 'mouseleave', function(){
		inner.stop();
        });
});
</script>
<a href="#" id="scroll">scroll :)</a>
<div id="container"/>

 

[Sven Mintel]

Mmmh, ich glaub das wird recht kompliziert, ich hab da nichts gefunden, um auf die Animation zuzugreifen :-(

Weiss der Geier, wo die sich versteckt ;-]

Was irgendwie zu gehen scheint, wäre den queue einzusetzen bei mouseleave, und zwar folgendermaßen:

        //left-Wert berechnen des aktuellen Kindes bis zum Rand
        var left=200+(parseInt( inner.css( 'left' ), 10 )%200);
        //Neue Animation in queue aufnehmen
        inner.animate({ left: '-='+left }, ( 200 ));
        //die laufende Animation stoppen, die neue Animation beginnt
        inner.stop();

Frag mich jetzt aber nicht, wie man das mit dem rechten Speed hinbekommt, dafür bin ich zu müde

Ooops: sehe grad, diesen Ansatz hast du schon verfolgt, bin wohl wirklich zu müde:suspekt:

 

[DeluXe]

*edit*
Ach bin ich doof, ich habe deinen Code nur überflogen und dann gelesen, dass ich den von dir genannten Ansatzh ja schon verfolge.
Eben habe ich dann doch mal genauer hin gesehen und muss sagen, das sieht irgendwie logisch aus.
Da ich alle nur denkbaren Positionsangaben habe, kann ich ohne Probleme errechnen welches Kind da gerade so halb sichtbar ist. Weil die Kinder sind nicht immer gleich breit, geschweige denn 200px.
Und daraus dann den Rest ermitteln dürfte ein leichtes sein.

Das probiert ich direkt mal aus.

Den alten Beitrag kann ich ja dann getrost entfernen.

Danke dir.

 

[DeluXe]

Gestern bin ich endlich mal dazu gekommen das auszuprobieren.

Das Schlüsselwort ist tatsächlich einfach nur "queue", damit tüdelt es ohne Probleme.

Danke.