简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - jquery如何点击切换，如何判断动画结束？
黄舟
黄舟 2017-04-11 10:32:26
0
3
476

  1. jquery 点击切换如何做，就是如果点击两次同一个panel，就会恢复原来的样子

  2. 我想实现的效果是如果点击同一个元素的话就恢复flex:1？

  3. 能不能用 "transitionend"事件代替settimeout,为什么我使用transitionend不起作用？

See the Pen NbEQZr by liuestc (@liuestc) on CodePen.


Hey

Let's

Dance

Give

Take

Receive

Experience

It

Today

Give

All

You can

Life

In

Motion

黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

répondre à tous (3)
Ty80
Ty802017-04-11 10:34:26 3 plancher 
$("el").toggle() $("el").toggleClass()

这两个能实现吗？

Comme+0
Ajouter une réponse
    洪涛
    洪涛2017-04-11 10:34:26 2 plancher 
    $(".panel").on("click",function(e){ $(this).siblings().removeClass("open active"); $(this).addClass("open"); }); $(".panel").on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){ if($(this).hasClass('open')){ $(this).addClass("active"); } });

    这个满足你的需求。

    PS：改了下，这样至少 IE 里不会严重错误。

    Comme+0
    Ajouter une réponse
      Peter_Zhu
      Peter_Zhu2017-04-11 10:34:26 1 plancher

      你的代码具体就不看了，回答一下你的第二个问题：

      http://www.runoob.com/jsref/e...

      // Safari 3.1 到 6.0 代码 document.getElementById("myp").addEventListener("webkitTransitionEnd", myFunction); // 标准语法 document.getElementById("myp").addEventListener("transitionend", myFunction);

      所以，其他浏览器，以及 jQuery 写法自己补一下哈

      Comme+0
      Ajouter une réponse
        Sujets populaires
        Plus>
        Articles populaires
        Tutoriels populaires
        Plus>
        Tutoriels associés
        Recommandations populaires
        Derniers cours
        Derniers téléchargements
        Plus>
        effets Web
        Code source du site Web
        Matériel du site Web
        Modèle frontal
        À propos de nous Clause de non-responsabilité Sitemap
        Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！