Realizar transição com FadeIn
Olá.
Tenho um script em JQuery que personalizei, mas queria adicionar uma transição a ele. O script consiste em um scroll de notícias que exibe 3 notícias e quando clicado na seta pra esquerda ou direita ele chama mais 3 notícias com uma transição que apenas passa a notícia. Queria que as notícias saíssem em FadeIn, ou seja, as últimas começassem um Fade o continuassem para a esquerda por exemplo. No script atual elas vão da direita pra esquerda e vice-versa, que adicionar o fade, pq elas passam apenas, quero que passem e desapareçam aos poucos (Fade). Como devo proceder?
HTML
[color="#FF0000"]...
<head>
<script src="js/jquery.tools.min.js"></script>
</head>...[/color]
<a class="prev browse left"></a>
<div id="more" class="scrollable">
<div class="items">
<!-- 1-5 -->
<div>
<ul>
<li>
<h6>Peça sua proposta</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</li>
<li>
<h6>Peça sua proposta</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</li>
<li>
<h6>Peça sua proposta</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</li>
</ul>
</div>
<!-- 5-10 -->
<div>
<ul>
<li>
<h6>Peça sua proposta</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<h6>Peça sua proposta</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<h6>Peça sua proposta</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
</ul>
</div>
<!-- 10-15 -->
<div>
<ul>
<li>
<h6>Peça sua proposta</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<h6>Peça sua proposta</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li>
<h6>Peça sua proposta</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
</ul>
</div>
</div>
</div>
<a class="next browse right"></a>
<script>
// custom easing called "custom"
$.easing.custom = function (x, t, b, c, d) {
var s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
// use the custom easing
$("div.scrollable").scrollable({easing: 'custom', speed: 1100, circular: true});
</script>CSS
#more {
font-family:Aller;
float:left;
}width:2000em;
position:absolute;
}background-image:url(../images/arrow-left.png);
cursor:pointer;
margin:18px 12px 0 2px;
width:21px;
height:32px;
text-indent:-9999px;
}background-position:0 -32px;
}background-image:url(../images/arrow-right.png);
cursor:pointer;
margin:28px 12px 0 2px;
width:21px;
height:32px;
text-indent:-9999px;
}float:left;
margin-right:8px;
}color:#8b8b8b;
font-size:16px;
font-weight:bold;
}cursor:pointer;
width:184px;
font-size:13px;
color:#a1a4a5;
line-height:17px;
text-shadow:1px 1px 1px #fefefb;
}color:#646667;
}color:#646667;
}Obrigado.
Discussão (2)
Carregando comentários...