实现渐隐渐现页面跳转

最新推荐文章于 2021-02-03 11:45:02 发布
最新推荐文章于 2021-02-03 11:45:02 发布
阅读量242 收藏 5
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/k13web/p/4139502.html
版权

 

       有时我们可能想要从一个页面跳转到另一个页面的过渡变得柔和些，也即是，点击链接后，当前页面渐隐，而后跳转渐显新页面的效果。可以使用jquery轻易实现。

 

效果：

 

页面1：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>页面1</title>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $("html").css("opacity","0");
        $("html").animate({opacity: 1}, 700);
        $("a").click(function() {
            var _this = $(this);
            $("html").animate({opacity: 0}, 700,function () {
                window.location.href = _this.attr("href");
            });
            return false
        });
    })
    </script>
</head>
<body>
    <a href="opacity2.html">opacity2</a>
    <h2>页面1</h2>
</body>
</html>

 

页面2：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>页面2</title>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $("html").css("opacity","0");
        $("html").animate({opacity: 1}, 700);
        $("a").click(function() {
            var _this = $(this);
            $("html").animate({opacity: 0}, 700,function () {
                window.location.href = _this.attr("href");
            });
            return false
        });
    })
    </script>
</head>
<body>
    <a href="opacity.html">opacity</a>
    <h2>页面2</h2>
</body>
</html>

 

原理：

    $(function () {
        $("html").css("opacity","0");   /*加载完成后将页面设置为透明*/
        $("html").animate({opacity: 1}, 700);   /*调用动画函数显示内容*/
        $("a").click(function() {
            var _this = $(this);   /*得到当前a标签并赋值给_this*/
            $("html").animate({opacity: 0}, 700,function () {   /*关键，调用动画函数将当前页面渐隐，页面隐藏后调用函数*/
                window.location.href = _this.attr("href");   /*跳转到a链接的页面*/
            });
            return false   /*关键，点击a后不跳转，等待animate动画完毕后使用js跳转*/
        });
    })

 

转载于:https://www.cnblogs.com/k13web/p/4139502.html

R芮R
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
03-18
NULL 博文链接：https://kingkit.iteye.com/blog/692191
Javascript实现div层渐隐效果的方法
10-24
主要介绍了Javascript实现div层渐隐效果的方法,涉及javascript操作页面元素与样式变化的相关技巧,需要的朋友可以参考下
iOS渐隐渐现效果跳转
你有故事，我囿酒
01-02 3264
ViewController *VC = [[ViewController alloc]init];     CATransition *tration = [CATransition animation];     tration.duration = 1.5f;     transition.type = kCATransitionFade;     [self.nav
切换页面渐隐效果
fjyts的专栏
08-07 475
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.5)" /> <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)" />
页面渐进式消失【JS代码】
ayksy468284的博客
05-31 136
1 // 设定时间，页面慢慢变透明，直到消失 2 var opacityInterval = setInterval(function () { 3 // 普通时间转为格林威治时间 4 var targetDate = new Date('2019-05-23 17:20:00') 5 var curren...
仿新浪微博发表渐隐渐现效果
06-27
当元素的`opacity`值从1变为0或者从0变为1时，配合`transition`属性，就能实现渐隐渐现的效果。 其次，JavaScript也可以用于实现这样的效果。例如，使用`setTimeout`或`setInterval`函数来在特定时间间隔内改变元素...
jQuery实现简单而且很酷的返回顶部效果
04-07
第二种效果可以加入一些过渡动画，例如渐隐渐现。在用户点击“返回顶部”按钮时，按钮可以逐渐变小并淡出，增加视觉效果。 第三种效果可能涉及更复杂的动画，如滑动或缩放。可以利用CSS3的`transition`属性和jQuery...
Wpf Page Demo
08-30
在本文中，我们将深入探讨“Wpf Page Demo”这一主题，这是一个展示WPF（Windows Presentation Foundation）页面如何实现延时自动跳转以及渐隐渐现动画效果的应用示例。WPF是.NET Framework的一个重要组成部分，它...
底部快捷菜单栏网页特效
11-20
- 使用JavaScript或jQuery可以实现更复杂的动态效果，如动画滑动、渐隐渐现等。 - 通过监听`click`事件，可以触发页面跳转或执行其他JavaScript函数。 - `toggleClass()`函数可用于切换菜单项的激活状态，提供更...
网页特效收藏收藏收藏
08-08
4. **非常酷的图形渐隐导航菜单栏**：这类特效利用CSS的透明度和JavaScript的定时器来实现图形（如按钮或图标）的渐隐渐现效果，增加导航的趣味性。 5. **仿Windows飞行视窗超酷效果的登陆框**：这是一种模拟操作...
CSS实现渐隐渐现效果
WindrunnerMax
02-03 6181
CSS实现渐隐渐现效果 实现渐隐渐现效果是比较常见的一种交互方式，通常的做法是控制display属性值在none和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素消失时具有平滑的效果。 实现 opacity opacity是用以设置透明度的属性，单纯将opacity设置为0只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互例如点击事件，对于其添加过渡属性可以显示动画效果，使用transitionend事件监听过渡完成之后隐藏元素，此
ruoyi 若依框架，点击弹窗(模态框)外空白处 关闭/不关闭 弹窗
热门推荐
test
06-30 1万+
ruoyi 若依框架，点击弹窗外空白处关闭弹窗
页面跳转淡入淡出效果代码
侯永奎
06-02 3162
在需要淡入淡出的页面的之间加入如下两行代码即能实现页面间跳转时淡入淡出效果。Duration的值为网页动态过渡的时间，单位为秒。Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：0 盒状收缩1 盒状放射　2 圆形收缩　3 圆形放射　4 由下往上5 由上往下　6 从左至右　7 从右至左　8 垂直百叶窗　9 水平百叶窗10 水平格状百叶窗　11垂直格状百叶窗　12 随意溶解　13从
Android 页面切换代码（淡入淡出效果）
qq_16933229的博客
11-09 702
public class CubeTransformer implements PageTransformer { private static float MIN_SCALE = 0.5f;     @Override     public void transformPage(View view, float position) {         int pageWidth = vi
如何实现一个盒子看起来缓慢消失切换到另一个页面的效果？
weixin_30906425的博客
11-01 374
前言： 在项目中，我们常会用到页面切换，如果我们把上一个页面display:none;然后让下一个display:block;这样难免会显得比较生硬，那么如何实现缓缓切换到下一个页面的效果呢？ 实现方法： 1、首先给盒子加过度属性。 -webkit-transition: 1s ease-out; transition: 1s ease-out； 2、然后待切换的时候...
C#中窗体渐显渐隐
xingyu_soft的专栏
02-22 2465
资源设计时，先将窗体的Opacity属性值设置为0% 然后往窗体上放置一个100ms定时器， 其Enable属性设置为true, 然后编写如下代码：   private bool bExitForm = false; private void timer1_Tick(object sender, EventArgs e) { if (bExitForm)
Javascript实现页面跳转的几种方式
叶_晓梦 的博客
01-08 2001
第一种：直接跳转加参数 window.location.href="login.jsp?backurl="+window.location.href; 直接跳转无参数：   window.location.href='http://www.baidu.com';   第二种：返回上一次预览界面  
css 实现页面渐隐过场动画
最新发布
05-23
可以使用 CSS3 的过渡（transition）和透明度（opacity）属性来实现页面渐隐过场动画。具体步骤如下： 1. 在 CSS 中设置页面的初始透明度为 1，即完全不透明。 ``` body { opacity: 1; } ``` 2. 定义一个 CSS 类...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值