jQuery中fadeToggle/Display触发Uncaught TypeError：功能可用但报错

What's Causing the Error? #

The core issue here is super straightforward: jQuery doesn't have a built-in display() method. When you chain $content.fadeToggle(...).display(...), you're trying to call a method that doesn't exist on the jQuery object returned by fadeToggle().

Your functionality still seems to work because the fadeToggle() call runs successfully before the error hits—browsers will halt execution at the line with the error, but the fade animation was already triggered. That said, leaving this error unaddressed is a bad idea (it can cause unexpected behavior later and clutters your console).

How to Fix It #

It looks like you're trying to control the display CSS property of your .content element. Instead of the non-existent display() method, use jQuery's built-in css() method. Also, since fadeToggle() is asynchronous, you'll want to adjust the display property after the fade animation finishes using the callback function:

function hoverTiles() {
  $('.content-block').hover(function () {
    var $content = $('.content', this);
    $content.fadeToggle(1000, 'linear', function() {
      // Check if the element is now visible or hidden
      if ($content.is(':visible')) {
        // Set your desired display value (e.g., block, flex, inline-block)
        $content.css('display', 'block');
      } else {
        $content.css('display', 'none');
      }
    });
  });
}

A Quick Note: #

If your goal was just to toggle visibility (which fadeToggle() already does), you might not even need the display adjustment at all. fadeToggle() automatically handles setting display: none when hiding and restoring the original display value when showing. The only reason to manually set it is if you need to force a specific display type (like flex instead of block) after the animation.

内容的提问来源于stack exchange，提问作者Covey