如何在不影响背景的情况下为整个内容添加混合效果

时间:2013-10-06 01:42:30

标签: javascript jquery html css

如何在点击链接后每次加载新内容时添加混合效果?

我看过谷歌,大多数网站提供的代码只是淡化图像或仅适用于整个页面的IE。我只是希望内容在加载到另一个页面时混合一点,显示从菜单中单击链接后的下一个内容。

我只需要在每个内容之间进行轻微混合。没有淡入或淡出只是混合。

很棒的答案@codedude !!!再次感谢!!!

2 个答案:

答案 0 :(得分:2)

在此处找到:http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

<script type="text/javascript">
$(document).ready(function() {
$("CONTENT TAG").css("display", "none");

$("CONTENT TAG").fadeIn(2000);

$("MENU LINK").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("CONTENT TAG").fadeOut(1000, redirectPage);      
});

function redirectPage() {
    window.location = linkLocation;
}
});
</script>

只需将“MENU LINK”更改为link元素的ID或类。一定要包含jQuery。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

答案 1 :(得分:1)

可以使用标题部分中的元标记指定转换,例如

<meta http-equiv="Page-Enter" content="revealTrans(Duration=**,Transition=?)">