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 12 of 12
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question jQuery fadeIn and fadeOut help

    I have a couple of divs on a page. I then have a navigation that shows related content based on which link is clicked. below is my javascript so far. I am wanting to have the visible div fade out and then new div fade in. Please help. Thanks in advance.

    Code:
    $(".subnavigation ul li a.company").click(function(){ 
    $(".content.show").removeClass("show");
    $("#company").addClass("show");
    $(".subnavigation ul li a.active").removeClass("active");
    $(this).addClass("active");
    })

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Code:
    $(".subnavigation ul li a.company").click(function(){ 
      $(".content.show").fadeOut(function() {
        $(this).removeClass("show")
      });
      $("#company").fadeIn(function() {
        $(this).addClass("show");
      });
      $(".subnavigation ul li a.active").removeClass("active");
      $(this).addClass("active");
    })

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you so much. We are just about there. Ther eis only one thing. There is a slight glitch when you click on the links. Click on the links a couple of times each http://shilohcreative.gethifi.com/wo.../web-presence#

    Thanks,
    Josh

  • #4
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Does anyone know how to make this a smoother fade?

    Thanks so much,
    Josh

  • #5
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Oh whaaa !! I just lost an eye, mate!

    Please read the documentation! http://api.jquery.com/fadeIn/

    .fadeIn( [duration] [, easing] [, callback] )

    duration -> A string or number determining how long the animation will run.
    easing -> A string indicating which easing function to use for the transition.
    callback -> A function to call once the animation is complete.

    The same applies for fadeOut.
    Chuck Norris counted to infinity.
    Twice.

  • #6
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you for the information, but this doesn't seem to fix the issue. If you look at http://shilohcreative.gethifi.com/wo...ational/intro# you will see when you click back and forth on company and objective that the div loads too quick or glitches.

    Thanks,
    Josh

  • #7
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts

    @op


    why use jquery for something that'll take about a dozen lines of code to do in plain javacsript?

    If you go look at the "back end" code your jquery runs, I bet it'll be a lot more than a dozen lines of code
    Last edited by webdev1958; 12-02-2011 at 12:13 AM.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    webdev, there is a little more to jQuery than just the animation part. Just think of cross-browser standard syntax and behavior that jQuery allows – where fading and animation is already something a little more advanced in terms of cross-browser compatibility. But that’s not the subject of this thread.

    speck, the problem is that you are fading in and out the two elements at the same time. When they are completely faded out they are set to display: none, i. e. they take no space. Now, while fading their opacity is changed and as soon as they are the slightest bit visible, they take their space in the natural flow of elements which is why the second element gets pushed down. One solution is to position these elements absolutely but that may make the layout less flexible. Another solution would be to fade the elements subsequently, i. e. make the fade-in after the fade-out has finished.

    PHP Code:
    $(".subnavigation ul li a.company").click(function(e){
      
    e.preventDefault();
      $(
    ".content.show").fadeOut(function() {
        $(
    this).removeClass("show");
        $(
    "#company").fadeIn(function() {
          $(
    this).addClass("show");
        });
      });
      $(
    ".subnavigation ul li a.active").removeClass("active");
      $(
    this).addClass("active");
    }) 
    And by the way: When I click these links the page jumps to the top which happens because you have useless links with just a hash as reference. I have overcome this with the preventDefault() function above but one rule of thumb in semantic HTML development is: If it doesn’t mean anything, don’t write it. In this case the anchor elements make no sense because they aren’t linking anything or going anywhere, respectively. If they are just supposed to work with JS then they don’t have to be anchor elements in the first place, you can perform an onclick event on any element. And with CSS you can still style them to look like clickable items. Or, if you indeed decide to use anchor elements, you don’t have to put an href attribute there if it doesn’t have a meaningful value anyway.

    But in the end it just comes down to one conclusion: If a clickable element is just working or making sense if JS is available then create and add it with JS in the first place, and don’t hard code it into the HTML. Why have HTML that doesn’t make sense all by itself? That’s called progressive enhancement.

  • Users who have thanked VIPStephan for this post:

    speck (12-02-2011)

  • #9
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by VIPStephan View Post
    webdev, there is a little more to jQuery than just the animation part......
    yep, but so what

    A lot of people (especially noobies) don't realise that jquery is nothing more than a bunch of javascript code/functions to perform certain tasks pre-written by someone else.

    Consequently, there is nothing you can do with jquery that you cannot do with just plain javascript, and in just about every case the amount of "back end" code jquery will run to perform a task will be much more than the equivalent plain javascript code.
    Last edited by webdev1958; 12-02-2011 at 01:21 AM.

  • #10
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts
    VIPStephan,
    Thank you so much for taking time to help me understand this. Your advice and the article you linked to were both very helpful. This is information I can use the rest of my career. Thanks again!

  • #11
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    In addition, this thread is a perfect example, as I see it, of the observations described in this thread.
    Last edited by webdev1958; 12-02-2011 at 01:32 AM.

  • #12
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    @ Webdev

    Why use jquery? I would answer "Why not?" !

    While I agree that you should have some javascript knowledge and understand its principles before starting to use a library such as jquery, why would you type your dozen lines of code when you can use such a simple function as fadeIn()...?
    Chuck Norris counted to infinity.
    Twice.


  •  

    Posting Permissions

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