content (wrapper) fadeout on menu-item hover

Resolved

(@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)

11 years, 4 months 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
Thread Starter Tr0tL
(@tr0tl)

11 years, 4 months 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
Emil Uzelac
(@emiluzelac)

11 years, 4 months 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
Thread Starter Tr0tL
(@tr0tl)

11 years, 4 months 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?

Thread Starter Tr0tL
(@tr0tl)

11 years, 4 months ago

btw:

this is the link for my page

Emil Uzelac
(@emiluzelac)

11 years, 4 months ago

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.