Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Fade in & slideup thingy

    Hey,

    I'm trying to learn Javascript and I'm stuck in the following - I got a #filesdown_ (class that activates the js), an img.filesfade_ (button that slides ul.files_menu down and fades itself to 0). When the mouse is out of #filesdown_ the ul.files_menu slides up again. I can't figure out how to keep the button opacity at 0 and the ul.file_menu down if the button or menu is hovered.

    Code:
    $(document).ready(function () {
        $('#filesdown_').mouseenter(function () {
        $('ul.files_menu').slideDown('medium');
    	$('img.filesfade_').stop().animate({"opacity": "0"}, "fastmedium");
        });
        $('ul.files_menu').mouseleave(function () {
        $('ul.files_menu').slideUp('medium');
    	$('img.filesfade_').stop().animate({"opacity": "1"}, "fast");
        });
        $('img.filesfade_').mouseleave(function () {
        $('ul.files_menu').slideUp('medium');
    	$('img.filesfade_').stop().animate({"opacity": "1"}, "fast");
        });
    });

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    You are studying jquery. It's a framework of javascript. Learning jquery is not the same a s learning javascript. But there is nothing wrong with jquery.

    For starters this:
    $('ul.files_menu').slideDown('medium');
    No medium speed use "slow", "normal", "fast" or the actual time in milliseconds.

    To control the opacity use fadeIn or fadeOut
    ex:
    Code:
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    $(document).ready(function () {
    
        $('#button').mouseenter(function () {
    		$('img.filesfade').fadeOut();
    	});
    
        $('#button').mouseleave(function () {
    		$('img.filesfade').fadeIn();
    	});
    
    });
    </script>
    
    <button id="button">PUSH</button><br />
    <img border="2" class="filesfade" src="images/6.png">
    Again no fastmedium. use the same speeds given above.

    Good place to learn basic jq is here http://www.w3schools.com/jquery/default.asp
    Last edited by sunfighter; 10-03-2012 at 05:54 AM.

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey,

    thanks for the answer! I've got the button as one element and the slide down menu as the second. I should need to use if statement to check wether one of the 'hover areas' are being targeted so the menu wont slide up or the button wont fade back,.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    I should need to use if statement to check wether one of the 'hover areas'
    You could use different classes or id's and the IF is not needed.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •