One element slides out while another fades out doesn't work.
Ok, I have a slide out menu that works great but when I want the logo behind the slide out menu to fade when the slide out menu comes out I can only get one or the other element to work.
Here is my code:
js:
function() {
var menu = $(this).find('.slide_menu');
var slide = $(this).find('.my_slide');
var logo = $(this).find('.header');
menu.hide();
slide.toggle(
function () {
menu.show("slide", { direction: "right" }, 1000);
logo fades but slide doesn't work ----> logo.fadeTo("opacity", .5);
});
});
html:
<div class="menu">
<div class="my_slide">« <span>menu</span></div>
<div class="slide_menu">
<ul>
<li><a href="">link 1</a></li>
<li><a href="">link 2</a></li>
<li><a href="">link 3</a></li>
<li><a href="">link 4</a></li>
<li><a href="">link 5</a></li>
</ul>
</div>
</div>
<div class="header"> </div>
Is it an append issue or should I be doing something with children??
Sorry but i'm new.
Thanks ahead.