SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to write the code more professional? (duplication in code)

    Hello!
    I use jQuery.
    In the code, there is duplication. But I don't know how to avoid it. This problem occurs frequently.
    Please help.

    http://jsfiddle.net/8DXmx/1/
    Code:
     //this
        $('#bio h3').click(function () {
            $(this).next().animate({
                'height': 'toggle'
            }, 'slow', 'swing');
        });
        //and this
        $('#bio > div').click(function () {
            $(this).animate({
                'height': 'toggle'
            }, 'slow', 'swing');
        });

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,899
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums

    If I was you, I would change your HTML (and CSS) to have a slightly more semantic structure:

    Code:
    <div class="panel">
      <h3>Jony</h3>
      <div>The programmer, play tennis</div>
    </div>
    Then you can just attach your event handler to the <div class="panel">

    Fiddle

    Also, you can safely discard the $(function(){ ... }) callback, as long as you put your JS immediately before your closing </body> tag, as then your DOM will be ready by definition.

    HTH

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo, thanks you for the helpful answer!

    I've updated the code to add { queue: false } options for animation, but now if double-click on the open panel, it closes instantly without animation. I have no ideas how to avoid it.

    http://jsfiddle.net/7AfVz/2/

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,899
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    No problem.

    What are you trying to achieve by adding queue: false?
    This option determines whether to place the animation in the effects queue. If false, the animation will begin immediately, which is presumably why you are seeing what you are seeing.
    http://api.jquery.com/animate/

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,899
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    If you are trying to ensure that the animation completes before responding to the next click you can do this:

    Code JavaScript:
    $(this).find("div").filter(':not(:animated)').animate({'height': 'toggle'}, 'slow', 'swing');

    New fiddle

    Reference: http://css-tricks.com/full-jquery-animations/

  6. #6
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    If you are trying to ensure that the animation completes before responding to the next click you can do this:

    Code JavaScript:
    $(this).find("div").filter(':not(:animated)').animate({'height': 'toggle'}, 'slow', 'swing');

    New fiddle

    Reference: http://css-tricks.com/full-jquery-animations/
    Yes, this is it!
    Thank you!

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,899
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    You're welcome

    If you are doing a lot with jQuery and animations, make sure you read the article I linked to, as it explains the problem and solution very well.

  8. #8
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    If you really wan't to cut down on code you could use something like the following.

    Code JavaScript:
    $('.panel:not(:first) > div').hide().end().on('click', 'h3', function() {
        var $next = $(this).next();
     
        if ($next.not(':animated')) {
            $next.animate({height: 'toggle'}, 'slow', 'swing');
        }
    });

    which can also be cut down to

    Code JavaScript:
    $('.panel:not(:first) > div').hide().end().on('click', 'h3', function() {
        $(this).next().stop(true, true).animate({height: 'toggle'}, 'slow', 'swing');
    });


Tags for this Thread

Bookmarks

Posting Permissions

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