Nachbau eines Flash Effektes

[Weissnix81]

Hallo Allerseits,
das ist mein erster Beitrag hier im Forum.

Eine kurze Vorstellung zu meiner Person, bin 29 Jahre, habe eine Ausbildung zum Fachinformatiker für Anwendungsentwikcklung gemacht und arbeite nun seit mehreren Jahren als Web-Entwickler.
Momentan Versuche ich mich in jQuery, Sencha Touch, Sass-lang einzufinden

Woran ich gerade hänge ist eine Animation, welche ich auf der VW-Seite gesehen habe.

zu sehen unter:
http://www.volkswagen.de

Den ersten Effekt habe ich Recht ähnlich hinbekommen, jedoch beim zweite hänge ich gerade, vielleicht bin ich auch falsch an das Problem gegangen.

Hier findet Ihr meine momentane Lösung:
Link

HTML Konstrukt

<h1>Hotspot mit Text</h1>
<p>
    <div class="hotspotTextContainer clearfix">
        <a class="hotspotText" href="layer.htm">
            <div class="hotspotTextMainContainer">
                Highlight
            </div>
        </a>
    </div>
</p>

<h1>Hotspot mit Text & Bild</h1>
<p class="clearfix">
    <div class="hotspotBigContainer clearfix">
        <a class="hotspotTextImage" href="layer.htm">
            <div class="hotspotBigMainContainer">
                <div class="hotspotBigImageContainer">
                    <img src="_images/thumbnail.jpg" width="211" height="99">
                </div>
                <div class="hotspotBigLinkContainer">
                    Highlight
                </div>
                <div class="hotspotBigContentContainer">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </div>
            </div>
        </a>
    </div>
</p>

CSS:

/* Hotspot mit Text */
.hotspotTextContainer {
	position: relative;
	float: none;
	display: block;
	margin: 15px 0;
	min-height: 45px;
	height: auto;
}

.hotspotBigContainer {
	position: relative;
	float: none;
	display: block;
	margin: 15px 0;
	min-height: 45px;
	height: auto;
}

a.hotspotText,
a.hotspotTextImage {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	float: left;
	color: #2274ac;
	padding: 0;
	text-decoration: none;
	font-size: 12px;
	line-height: 13px;
     -moz-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.40); /* FF3.5+ */
  -webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.40); /* Saf3.0+, Chrome */
          box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.40); /* Opera 10.5, IE9, Chrome 10+ */
}



a.hotspotText .hotspotTextMainContainer,
a.hotspotTextImage .hotspotBigLinkContainer {
	display: block;
	background-image: url(../_images/ic_arrow_right_ora.png);
	background-repeat: no-repeat;
	background-position: 10px center;
	padding: 9px 11px 9px 18px;
}

a.hotspotTextImage {
	width: 100px;
}

a.hotspotTextImage:hover .hotspotBigMainContainer {
	background-color: #eaeeed;
}

a.hotspotTextImage .hotspotBigContentContainer {
	color: #111111;
}

a.hotspotText,
a.hotspotTextImage {
	border: 0px solid transparent;
	background-color: #ffffff;
}

a.hotspotText:hover {
	border: 5px solid transparent;
	top: -5px;
	left: -5px;
}

a.hotspotTextImage:hover {
	border: 5px solid #fff;
}

a.hotspotTextImage .hotspotBigImageContainer,
a.hotspotTextImage .hotspotBigContentContainer {
	height: 0;
	overflow: hidden;
}

JavaScript:

// Hotspot Text
$(document).ready(function() {
	
	$('.hotspotText').mouseover(function() {
		$(this).stop().animate({
			borderTopColor: "#ffffff",
			borderRightColor: "#ffffff",
			borderBottomColor: "#ffffff",
			borderLeftColor: "#ffffff"
		}, 100);
	});
	
	$('.hotspotText').mouseout(function() {
		$(this).stop().animate({
			borderTopColor: "transparent",
			borderRightColor: "transparent",
			borderBottomColor: "transparent",
			borderLeftColor: "transparent"
		}, 100);
	});
	
	$('.hotspotTextMainContainer').mouseover(function() {
		$(this).stop().animate({
			paddingRight: '142px'
		}, 200, function() {
			// Animation complete.
		});

		$(this).css({
			backgroundColor: '#eaeeed'
		}, function() {
			// Animation complete.
		});	
	});

	$('.hotspotTextMainContainer').mouseout(function() {
		$(this).stop().animate({
			paddingRight: '11px'
		}, 200, function() {
			$(this).css({
				backgroundColor: '#ffffff'
			}, function() {
				// Animation complete.
			});
		});
	});
 
});

// Hotspot Text Bild
$(document).ready(function() {
	
	$('.hotspotTextImage').mouseover(function() {
			$(this).css({
				top: '-5px',
				left: '-5px'
			});	
	
			$(this).stop().animate({
				width: '211px'
			}, 500, function() {
				$('.hotspotBigImageContainer').stop().animate({
					height: '99px'
				});
				$('.hotspotBigContentContainer').stop().animate({
					height: '99px'
				});
				$('.hotspotBigContentContainer').css({
					padding: '0px 10px 10px 10px'
				});	
			});
	});
	
	$('.hotspotTextImage').mouseout(function() {
			$(this).css({
				top: '0px',
				left: '0px'
			});
			
			$(this).find('.hotspotBigContentContainer').css({
				padding: '20px'
			});
			
			$(this).find('.hotspotBigImageContainer').stop().animate({
				height: '0px'
			});

			$(this).find('.hotspotBigContentContainer').stop().animate({
				height: '0px'
			});
			
			
	});
	
});

Das Problem macht momentan das Mouseout, es reagiert nicht wie das Mouseover (nur umgekehrt).

Und im Gegensatz zum VW Vorbild klappt das Ganze bei Mouseover nach unten auf, anstelle das der Link an der selben Stelle bleibt

Habt Ihr vielleicht Tipps?
Gruß Ahmet

 

[CPoly]

Bei einem Problem kann ich dir schon mal helfen. Da die nativen mouseover und mouseout Events doof sind, gibt es bei jQuery mouseenter und mouseleave. Wenn du die stattdessen benutzt, sollten die Probleme schon mal weg sein.

Für das andere gibt es bestimmt mehrere Lösungen. Spontan würde ich overflow:hidden benutzen, dann den äußeren Kasten schrumpfen und scrollen, damit der Link zentriert ist. Beim animieren musst du natürlich absolute positionierung benutzen und "top" gleichzeitig mit "height" animieren, damit der Link an seiner Stelle bleibt.

 

[Weissnix81]

vielen Dank für den Tipp, damit habe ich nun eine Version machen können, welche funktioniert aber optisch nicht ganz so klappt. Das mit den absoluten Positionieren und der Linkgröße bekomme ich nicht in Einklang