Support » Theme: Responsive » content (wrapper) fadeout on menu-item hover

  • Resolved Tr0tL

    (@tr0tl)


    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>
Viewing 6 replies - 1 through 6 (of 6 total)
  • Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

    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

    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

    Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

    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

    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?

    btw:

    this is the link for my page

    Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

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

    Emil

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘content (wrapper) fadeout on menu-item hover’ is closed to new replies.