Promena pozadine diva sa sadržajem koristeći fadeTo() + bug

apolo · 23. 10. 2010.

Nadam se da neko može da mi odgonetne ovaj bug (nadam se da je rešivo). U pitanju je varijacija na temu promene pozadinske slike preko jQuery-ja, ali uz razliku što se u divu nalazi sadržaj. Skoro svi primeri su prazan div ili indentovan tekst.

Problem je kada se pokrene efekat, element koji treba da promeni pozadinu se postavi preko sadržaja. I kada se tranzicija završi, on onda postavi tekst iznad.

Ja želim da tekst uvek bude na vrhu.

Probao sam zoom, z-index, overflow... I svakakve druge kombinacije, bez sreće.

Kod.

HTML kôd:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Code snipet 5e</title>
		<style type="text/css">
			body
			{
				background: #FF9933;
			}
				#mainbox
				{
					position: relative;
					height: 400px;
					width: 800px;
				}
					.o_box
					{
						float: left;
						width: 149px;
						height: 149px;
						display: block;
						margin: 0 2px;
						background: url(codesnipet5e.png) 0 0 no-repeat; /* 298x149 */
					}
						.o_box h1
						{
							color: #fffbcc;
							font-size: 10pt;
							margin: -149px 0 0 10px;
							padding: 5px 0 0 0;
							text-transform: uppercase;
							font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
						}
						.o_box p
						{
							color: #FFFFFF;
							font-size: 8pt;
							margin: 8px 0 0 0;
							padding: 0 6px 0 10px;
							font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
						}
							.o_box p strong
							{
								border-bottom: 1px dotted #CCCCCC;
							}
						.hover
						{
							width: 149px;
							height: 149px;
							background: url(codesnipet5e.png) -149px 0 no-repeat; /* 298x149 */
						}
		</style>
		<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
		<script type="text/javascript">
		/**
		 * @author Alexander Farkas
		 * v. 1.02
		 */
		(function($) {
			$.extend($.fx.step,{
				backgroundPosition: function(fx) {
					if (fx.state === 0 && typeof fx.end == 'string') {
						var start = $.curCSS(fx.elem,'backgroundPosition');
						start = toArray(start);
						fx.start = [start[0],start[2]];
						var end = toArray(fx.end);
						fx.end = [end[0],end[2]];
						fx.unit = [end[1],end[3]];
					}
					var nowPosX = [];
					nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
					nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
					fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
		
				   function toArray(strg){
					   strg = strg.replace(/left|top/g,'0px');
					   strg = strg.replace(/right|bottom/g,'100%');
					   strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
					   var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
					   return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
				   }
				}
			});
		})(jQuery);
		</script>
	</head>
	<body>
		<div id="mainbox">
			<a href="#" title="Naslov">
				<div class="o_box">
					<h1>Naslov</h1>
					<p><strong>Istaknuto</strong> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst.</p>
				</div>
			</a>
			<a href="#" title="Naslov2">
				<div class="o_box">
					<h1>Naslov</h1>
					<p><strong>Istaknuto2</strong> tekst2 tekst tekst tekst2 tekst 2tekst tekst tekst tekst tekst2 tekst tekst2 tekst tekst tekst2 tekst tekst tekst tekst tekst tekst tekst tekst2 tekst.</p>
				</div>
			</a>
			<a href="#" title="Naslov3">
				<div class="o_box">
					<h1>Naslov</h1>
					<p><strong>Istaknuto 3</strong> tekst3 tekst3 tekst tekst3 tekst tekst tekst tekst3 tekst tekst tekst3 tekst3 tekst tekst3 tekst tekst tekst tekst3.</p>
				</div>
			</a>
			<a href="#" title="Naslov4">
				<div class="o_box">
					<h1>Naslov</h1>
					<p><strong>Istaknuto 4</strong> tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4 tekst4.</p>
				</div>
			</a>
		</div>
		<script type="text/javascript">
			$(document).ready(function () {
				$('.o_box').prepend('<div class="hover" />').each(function () {
					var $span = $('> div.hover', this).css('opacity', 0);
					$(this).hover(function () {
						// on hover
						$span.stop().fadeTo(500, 1);
						}, function() {
						// off hover
						$span.stop().fadeTo(500, 0);
					});
				});
			});
		</script>
	</body>
</html>

P.S.
Pokušao sam da stavim spoiler tag, preko koda, ali nije htelo da radi.
U fajlu je i sličica.

misk0 · 23. 10. 2010.

Nisam bas imao zelje da pregledam sta tacno radi onaj kod ali mozes koristiti ovo za zeljeni efekat

Kôd:

		<script type="text/javascript">
			$(document).ready(function () {
				$('.o_box').bind("mouseenter mouseleave", function(evt){
				  if (evt.target.tagName == "DIV") {
     				  $(evt.target).stop().toggleClass("hover", 300);
    				  evt.stopPropagation();
             console.log(evt.target.tagName);
          }
        });
		});
		</script>

Izbaci sav onaj JS kod, ostavi poziv za jquery, i ubaci ucitavanje jQuery UI-ja.

Kôd:

		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>

apolo · 24. 10. 2010.

Hvala misk0, probao sam sličan takav primer dok sam tražio solucije za pravljenje željenog efekta, ali to nije ono što mi treba.

Ja želim da iskoristim fade jedne slike preko druge, uz to da sadržaj bude vidljiv, konstantno, u jednom zajedničkom kontejneru/boxu.

Tvoj primer, na kome ti puno hvala, radi slide elementa sa desne na levu stranu.

apolo · 24. 10. 2010.

Rešio sam problem.

I'm so excited.

Napisaću tutorijal za efekat pa ću postaviti link ovde.

ajankovic · 24. 10. 2010.

Citat:

Rešio sam problem. I'm so excited.

U dve rečenice si sročio osnovu motivacije svakog programera. To ti je ta programerska droga. To je ono što nas drži satima pored računara. Čekamo na sledeći fix

!

Slične teme
Tema	Početna poruka teme	Forum	Odgovori	Poslednja poruka
Google omogućio korisnicima odabir pozadine	Dzonny	Opušteno	32	12. 06. 2010. 02:43
Clear:both ali samo unutar diva?	apash86	(X)HTML, JavaScript, DHTML, XML, CSS	4	23. 08. 2008. 14:49
koji cms koriste	staseprimate	Sva početnička pitanja	10	24. 05. 2008. 22:04
Menjanje pozadine ili css-a u wordpressu	nelle	Sva početnička pitanja	6	02. 08. 2007. 07:02

24. 10. 2010.	#3
apolo novi član Na probnom radu Datum učlanjenja: 29.07.2009 Poruke: 13 Hvala: 4 5 "Hvala" u 1 poruci	Hvala misk0, probao sam sličan takav primer dok sam tražio solucije za pravljenje željenog efekta, ali to nije ono što mi treba. Ja želim da iskoristim fade jedne slike preko druge, uz to da sadržaj bude vidljiv, konstantno, u jednom zajedničkom kontejneru/boxu. Tvoj primer, na kome ti puno hvala, radi slide elementa sa desne na levu stranu.

24. 10. 2010.	#4
apolo novi član Na probnom radu Datum učlanjenja: 29.07.2009 Poruke: 13 Hvala: 4 5 "Hvala" u 1 poruci	Rešio sam problem. I'm so excited. Napisaću tutorijal za efekat pa ću postaviti link ovde.