WordPress.org

Forums

Responsive
[resolved] content (wrapper) fadeout on menu-item hover (7 posts)

  1. Tr0tL
    Member
    Posted 2 years ago #

    hi there

    i try to fade out the content-container (wrapper) when mouse hovers a navigation-menu-link with this small script, what i put in responsive-theme-options/individual scripts at footer:

    <script>
        $("li.menu-item").hover(
          function () {
            $(wrapper).fadeOut(100);
          },
          function () {
            $(wrapper).fadeIn(500);
          }
        );
      </script>

    but why does it not work?
    test with a small html-file with the same script works fine

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title></title>
    
      <style>
    
        #wrapper {
          text-align:center;
          color:#fff;
          float:left;
          margin:5px;
          width:100px;
          height:100px;
          background-color:#000000;
        }
      </style>
    
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    
      </head>
      <body>
        <li class="menu-item"><a href="">link</a></li>
    
      <div id="wrapper">here is the content</div>
    
      <script>
        $("li.menu-item").hover(
          function () {
            $(wrapper).fadeOut(100);
          },
          function () {
            $(wrapper).fadeIn(500);
          }
        );
      </script>
    
      </body>
    </html>
  2. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    Hi,

    There's no need to include jQuery, Theme can do that. jQuery is bundled with WordPress and if you have JS to include you can simply add that directly from Theme Options under the Custom Scripts.

    But I would go with CSS3 like this:

    .menu {
    	-webkit-transition: all 0.3s ease-out;
    	-moz-transition: all 0.3s ease-out;
    	-ms-transition: all 0.3s ease-out;
    	-o-transition: all 0.3s ease-out;
    	background-color: #c4c4c4;
    	background-image: none;
            filter: none;
            transition: all 0.3s ease-out;
    }

    Thanks,
    Emil

  3. Tr0tL
    Member
    Posted 2 years ago #

    thx emil

    but i dont want the menu to fadeout

    the menu should be the trigger for fading out the wrapper
    pls read the problem-instructions above again
    it seems you did not understand what i want to do

    thx for help

  4. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    You can try this instead:

    <script>
        jQuery("li.menu-item").hover(
          function () {
            jQuery(wrapper).fadeOut(100);
          },
          function () {
            jQuery(wrapper).fadeIn(500);
          }
        );
      </script>

    is there an example how this should look like?

    Emil

  5. Tr0tL
    Member
    Posted 2 years ago #

    yeah

    thx emil
    that works

    the next step for my nav-menu is to set another backgroundImage for each menu-item
    it should work like on this page JVM
    maybe you have any ideas how to do that?

  6. Tr0tL
    Member
    Posted 2 years ago #

    btw:

    this is the link for my page

  7. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    Sorry, this is beyond my knowledge and maybe better for jQuery support forum :)

    Emil

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.