jquery - 如何摆脱 jquery 故障效果？-6ren

jquery - 如何摆脱 jquery 故障效果？

转载作者：太空宇宙更新时间：2023-11-04 10:38:09

25

4

我正在使用 jquery 动画来增加 div 的宽度和高度。单击框时会触发动画，然后单击出现的后退字体图标时会恢复为原始大小。

html:

<body>
<div class="flex-container">
        <div class="flex-items">
    <i class="fa fa-reply fa-2x"></i>1
</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>2</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>3</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>4</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>5</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>6</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>7</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>8</div>
    </div>
</body>

CSS:

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: lightblue;
}
.flex-container{
    display: flex;
    width: 90vw;
    margin: 0 auto;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 20px;
}
.flex-items{
    width: 350px;
    height: 350px;
    border: 1px solid black;
    order: 1;
}
i{
    visibility: hidden;
    float: right;
}
.header{
    height: 50px;
    background-color: #333;
}
.headerText{
    margin-left: 40px;
    color: white;
}

j查询:

$(document).ready(function(){
    $(".flex-items").click(function(){
        console.log(this.css);
        $(this)
        .animate({
            width: '100vw',
            height: '100vh'},{
            duration: 300,
            ease: "slow"})  
        .css("order", "0");

        i = $(this).children();
        $(i).css("visibility" ,"initial");
    });
    $("i").click(function(evt){
            evt.stopPropagation();
            $(".flex-items").animate({
            width: '300px',
            height: '300px'},{
            duration: 300,
            ease: "linear"})
            .css("order", "1");
            $(this).css("visibility" ,"hidden");
    });
});

当您关闭 div 并返回其原始状态时，会发生一种“故障”类型的效果。有没有办法让过渡更顺利？

Codepen

最佳答案

我们不要忘记 flexboxes 也可以使用 transform:translate3d([whatever vertical], [whatever horizontal], [set to 0 to make sure we're required GPU through "3d"])，让您可以访问复杂的 flexbox 网格，其中一些 flex 面板可能是 flex 的，因此会收缩/增长，而其他面板可能会在其他 flex 面板上方/下方滑动(在 z-index 的帮助下>).

关于jquery - 如何摆脱 jquery 故障效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36014825/

25

4

0

文章推荐： javascript - Angular - Accordion - 仅显示事件组

文章推荐： python - 在 Linux 中使用 Python 绘制随机点

文章推荐： php - 如何在指定端口的命令行中启动 apache2？

文章推荐： python - 以人类可读的格式显示选项字段

javascript - 用jquery(而不是mootools)模拟这个 slider 效果【横向 Accordion 效果】
我可以使用 javascript 和其他所有东西，但在重新发明轮子之前，我想知道是否已经有一个类似的 jquery 插件，因为我想使用那个框架而不是 mootools。我没有钱的问题，特别是 5 欧
悬停关闭的 CSS 效果
我正在 React 应用程序中处理动画。我需要动画在悬停后开始工作。我尝试了 :hover:after css 但不起作用。将鼠标悬停在图像上后动画可以工作，但我需要在悬停后开始。将鼠标悬停在图像上
Jquery slider 效果
我正在使用 jQuery 在按钮单击时实现 slider 效果。我的代码是: $(document).ready(function() { $("#mybutton").click(functio
jQuery .slideRight 效果
我需要一个div标签在屏幕右侧滑出，如何使用jQuery获得这种效果？我一直在看这里:http://api.jquery.com/category/effects/sliding/而且这似乎不是我要找
iPhone页面 curl 效果
我正在使用此代码实现页面 curl 效果......它在模拟器和设备中工作正常......但它不是(setType:@“pageCurl”)苹果记录的api，这导致它被iPhone拒绝App Stor
WPF 效果 - 对文本
我见过各种关于 WPF 效果的引用，但它们似乎是针对位图的，而不是针对文本的。是否可以将除模糊或投影以外的效果应用于XAML中的TextBlock对象？我想要做的示例可能是轮廓笔划，或斜角/浮雕效果
WPF 效果 - 对文本
我见过各种关于 WPF 效果的引用，但它们似乎是针对位图的，而不是针对文本的。是否可以将除模糊或投影以外的效果应用于XAML中的TextBlock对象？我想要做的示例可能是轮廓笔划，或斜角/浮雕效果
css - 没有固定定位的假背景透明度/效果
我正在尝试模拟这种效果:http://meyerweb.com/eric/css/edge/complexspiral/demo.html在我的博客上:http://segment6.blogspot
JavaFX Accordion 效果
我尝试将样式应用到 Accordion Pane ，但遇到了问题。这行不通。 accordion.setEffect(new DropShadow(BlurType.ONE_PASS_BOX, Co
javascript - 数据表切换列可见性延迟/效果
关于 Datatables website 的教程足够清楚了: 在我告诉 Datatables 我正在谈论哪一列后，我只需将切换按钮放入: column.visible( ! column.visib
Jquery ScratchOut 效果
我正在寻找 scratchOut 效果，随便叫它什么。这是从前景中删除图像的效果，因此背景图像变得可见。我曾尝试使用 jquery 插件重新创建此效果，但它并不像我希望的那样流畅。有没有人有这种
Android实现文字和图片混排(文字环绕图片)效果
本文实例讲述了android实现文字和图片混排(文字环绕图片)效果。分享给大家供大家参考，具体如下：在平时我们做项目中，或许有要对一张图片或者某一个东西进行文字和图片说明，这时候要求排版美观，所
Javafx简单实现【我的电脑资源管理器】效果
本文实例讲述了Javafx简单实现【我的电脑资源管理器】效果。分享给大家供大家参考。具体如下： 1. java代码： ?
angular - 服务循环的 ngrx 效果
我是 ngrx 的新手，正在尝试让我的 ngrx 商店的 @Effect 函数正常工作。下面的代码显示了如果我没有使用 ngrx 商店，服务是如何工作的。我首先调用 http.get 来获取列表，然后
ffmpeg - 如何在不对视频应用图像蒙版的情况下创建圆形视频(视频顶部的透明区域)效果
基本上我搜索了很多，解决方案建议应用一些 PNG 掩码或不提供所需的解决方案。我发现了什么。 ffmpeg -i main.mkv -i facecloseup.mkv -filter_compl
rxjs - 需要帮助理解这个 Ngrx 效果
有关使用从商店中选择的状态的效果的 Ngrx 文档状态(没有双关语意) Note: For performance reasons, use a flattening operator like co
c# - 如何在数据网格控件中利用 WPF 效果？
我有一个数据网格控件，我在其中使用名为 FastShadow 的自定义效果，它就像一个光晕。我希望效果在其边界之外发光，这样很好，但是当我在顶部绘制另一个形状时，我不希望这个形状受到影响。在本例中，
css - 从单个元素中移除 CSS 效果
除了子 div.exception 中的所有内容，我想将 div.main 中的所有文本设为灰色。 div.exception 应该看起来好像类 main 从未添加到父 div。这可能吗？如果是这样
flutter - 使用pdf文件的页面 curl 效果
我有一个 PDF 文件，我想重现此包页面中的页面 curl 效果: https://pub.flutter-io.cn/packages/page_turn 我试过用这个 page_turn插件，它需
rxjs - 延迟测试 NGRX 效果
我想测试一个效果如下: 如果调度了 LoadEntriesSucces 操作，则效果开始等待 5 秒 5 秒后发送 http 请求当响应到达时，将分派(dispatch)新的操作(取决于响应是成功

首页

博学

6Ren·AI

商城

jquery - 如何摆脱 jquery 故障效果？