2 replies to this topic

[jonny_pingonope]

caros amigos estou finalizando o layout do meu blog e gostaria de por um efeito no banner dele tenho um modelo mas estudei o css minunciosamente e não consigo por o efeito será que alguem poderia me ajudar?
o efeito é tipo umas bolhas subindo quando no estado hover o site para ver ele funcionando é este: Clique aqui e o efeito fica nos frascos lá em baixo onde tem as bolhas subindo... eu gostaria de colocar um efeito deste no entanto não estou conseguindo... estou testando no rodapé do meu projeto Clique aqui onde tem um pinguim de ponta cabeça. se alguem puder me ajudar agradeço!!

[DC_Switch]

vc não acho pke uso jquery junto

$(function() {
	bubbles();
});

function bubbles() {

	$('a.beaker').append('<span class="bubbles"><span class="strip"></span></span>');

	var bgPosition = 0;

	var resetBg = function() {
		var self = this;
		$('.strip', this).css({
			'top': 0
		});
	};

	var moveBg = function() {
		var self = this;
		bgPosition += 200;
		$('.strip', this).css({
			'top': -bgPosition + 'px'
		});
	};

	$('.item a').hover(function() {
		//alert('on');
		var parentItem = $(this).parents('.item');
		var theBubbles = $('.bubbles', parentItem);
		bubblingInterval = setInterval(function() {});
		//bubblingTimeout = setTimeout(function() {
			$(theBubbles).stop().animate({ 'opacity': 1 }, 900, 'easeOutSine');
			bubblingInterval = setInterval(function() {
				moveBg.apply(theBubbles);
			}, 90);	
		//}, 100)
		
	},function() {
		//clearTimeout(bubblingTimeout);
		clearInterval(bubblingInterval);
		var parentItem = $(this).parents('.item');
		var theBubbles = $('.bubbles', parentItem);
		bgPosition = 0;
		$(theBubbles).stop().animate({ 'opacity': 0 }, 500, 'easeOutSine', function() {
			resetBg.apply(theBubbles);
		});
	});

};

[jonny_pingonope]

estou tentando colocar isso mas nem sinal de conseguir!!! peguei o jquery e chamei ele mas ainda não funciona! será que declarei a chamada pois no wordpress fica mais complicado?
to colocando no http://testes.pingonope.com estou tentando colocar no rodapé!
--------

vc não acho pke uso jquery junto

$(function() {
	bubbles();
});

function bubbles() {

	$('a.beaker').append('<span class="bubbles"><span class="strip"></span></span>');

	var bgPosition = 0;

	var resetBg = function() {
		var self = this;
		$('.strip', this).css({
			'top': 0
		});
	};

	var moveBg = function() {
		var self = this;
		bgPosition += 200;
		$('.strip', this).css({
			'top': -bgPosition + 'px'
		});
	};

	$('.item a').hover(function() {
		//alert('on');
		var parentItem = $(this).parents('.item');
		var theBubbles = $('.bubbles', parentItem);
		bubblingInterval = setInterval(function() {});
		//bubblingTimeout = setTimeout(function() {
			$(theBubbles).stop().animate({ 'opacity': 1 }, 900, 'easeOutSine');
			bubblingInterval = setInterval(function() {
				moveBg.apply(theBubbles);
			}, 90);	
		//}, 100)
		
	},function() {
		//clearTimeout(bubblingTimeout);
		clearInterval(bubblingInterval);
		var parentItem = $(this).parents('.item');
		var theBubbles = $('.bubbles', parentItem);
		bgPosition = 0;
		$(theBubbles).stop().animate({ 'opacity': 0 }, 500, 'easeOutSine', function() {
			resetBg.apply(theBubbles);
		});
	});

};

já consegui amigos valeu!!!