Disable dropdown menu transition effect (JS)

Question

there is a transition effect in my dropmenu that i want to completely disable , this is the js code that i think i have to change

    function(e) {
  if ((/input|textarea/i.test(e.target.tagName) ? !(32 === e.which || 27 !== e.which && (40 !== e.which && 38 !== e.which || t(e.target).closest(y).length)) : h.test(e.which)) && (e.preventDefault(), e.stopPropagation(), !this.disabled && !t(this).hasClass(u))) {
    var n = a._getParentFromElement(this),
      i = t(n).hasClass(f);
    if ((i || 27 === e.which && 32 === e.which) && (!i || 27 !== e.which && 32 !== e.which)) {
      var s = t(n).find(I).get();
      if (0 !== s.length) {
        var r = s.indexOf(e.target);
        38 === e.which && r > 0 && r--, 40 === e.which && r < s.length - 1 && r++, r < 0 && (r = 0), s[r].focus()
      }
    } else {
      if (27 === e.which) {
        var o = t(n).find(E)[0];
        t(o).trigger("focus")
      }
      t(this).trigger("click")
    }
  }
}

There is nothing related to transitions in this code. Look for `transition` or `animation` in your CSS — blex, Dec 13 '20 at 20:34

Remirol · Accepted Answer · 2020-12-14T20:44:50.027

1

Possibly a duplicate of this which is a duplicate of this post

If you don't want to jump over and read, here's the CSS that you should add:

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

Don't forget to search for an answer first before posting questions.

EDIT: You're correct that your site is using JS/jQuery to do this. The function is in the my-js.js file and is this function:

$(document).ready(function(){
    $(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideDown("low");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideUp("low");
            $(this).toggleClass('open');       
        }
    );
});

You can edit the slideDown and slideUp methods to be slideUp(0) (no quotes inside as it's a numeric value) instead of 'slow'. This should essentially disable the animation.

edited Dec 14 '20 at 20:44

answered Dec 13 '20 at 20:49

Remirol

91
5

i tried all of these but changing css doest affect any thing in my code , i thouth i have to change this jc to remove that transition – arsaces Dec 13 '20 at 22:03
thanks for your help , i did exactly what you said but still the animation is slow – arsaces Dec 14 '20 at 00:15
I just checked the source (in Chrome Dev tools) and there has been no change on your live site. Did you save the file after editing. It's also possible since you're on WordPress that you need to edit a child theme or the main theme if you're using a child theme. I'm not sure about the workings of WordPress themes. – Remirol Dec 14 '20 at 00:22
I can see it's changed to `slideDown("fast")` if it's not working you may need to refresh your browser cache. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. [jquery animate](https://api.jquery.com/animate/) Also, if 'fast' is not fast enough, use a numeric value less than 200. – Remirol Dec 14 '20 at 20:30
first was 0 and i didnt saw any changes after that i changed o fast but nothing changed , i use inconito mode – arsaces Dec 14 '20 at 20:32
It's `slideDown(0)` not `slideDown("0")` – Remirol Dec 14 '20 at 20:33
oh my bad , i just changed it , i hope it will work – arsaces Dec 14 '20 at 20:38

Disable dropdown menu transition effect (JS)

1 Answers1