Solved

jQuery .show() function question

Posted on 2014-11-29
13
167 Views
Last Modified: 2014-11-30
Here is a code snippet I got from jQuery's website at http://api.jquery.com/show/. The show() function clearly animates by expanding the width, height, and  opacity in a certain way. Is there a way to alter that? For example, what if I wanted only the height to expand and not the width, or vice versa?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Show it</button>
<p style="display: none">Hello  2</p>
<script>
$( "button" ).click(function() {
  $( "p" ).show( "slow" );
});
</script>
</body>
</html>

Open in new window

0
Comment
Question by:elepil
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 3
13 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40472044
How can you have height without width when the element is 100% wide?
If you don't want 100% width then use inline-block in the css or use an inline element.
0
 

Author Comment

by:elepil
ID: 40472049
You can set the width and height (or line-height) to a fixed pixel value prior.

You didn't answer my question though. Is there a way to alter the way jQuery handles it's show()/hide() animation in terms of how it manipulates the properties? (Aside from going into the jQuery code and modifying it there, of course.)
0
 
LVL 58

Expert Comment

by:Gary
ID: 40472053
http://jsfiddle.net/d388t1oL/3/

$( "button" ).click(function() {
    $( "p" ).animate( {"height":"toggle" });
});

Open in new window

0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 

Author Comment

by:elepil
ID: 40472059
Gary, I think you're missing my point. I'm not trying to make an animation with the width preset and the height expanding downward; that was just an animation variant example I gave to stress the point that jQuery's animation choreography may not be what I want. You used the animate() function, which wasn't even what I was asking about.

The point of my question is, am I stuck with the way jQuery 'choreographs' the show() function (without having to modify jQuery itself)? That's what I want to know from people more experienced than I am at jQuery.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40472060
Uh?? Then what do you want
what if I wanted only the height to expand and not the width
0
 

Author Comment

by:elepil
ID: 40472062
I just explained it to you. Why do I get a feeling you don't read my entire post?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40472064
I think you should reread your own comment because it makes no sense.
You want the .show() to do something it's not designed to do - what that may be is anyones guess
0
 
LVL 43

Accepted Solution

by:
Rob earned 500 total points
ID: 40472102
I feel this is relevant that in the api documentation: http://api.jquery.com/show/

When a duration, a plain object, or a "complete" function is provided, .show() becomes an animation method. The .show() method animates the width, height, and opacity of the matched elements simultaneously.

So not only is it built on the animation class, it is predefined to animate the width, height and opacity only and at the same rate.  So it other words you can't edit it.

You will have to build your own animation using the animation function: http://api.jquery.com/animate/

.show() is simply a predefined animate() function call. Does that make sense?
0
 

Author Closing Comment

by:elepil
ID: 40472111
Rob Jurd, you answered my question directly, and that was what I wanted to know, as you said succinctly -- "it is predefined to animate the width, height and opacity only and at the same rate.  So it other words you can't edit it."
0
 
LVL 58

Expert Comment

by:Gary
ID: 40472133
$( "p" ).show("slow")

does exactly the same as, and calls the same functions as

$( "p" ).animate( {"height":"toggle","width":"toggle" });

as pointed out here

.show() isn't some magical function, both examples above call the same functions, .show() is just a shorthand function
0
 
LVL 43

Expert Comment

by:Rob
ID: 40472170
elepil,

Thanks for the points and I'm glad you understood how .show() now works.  I do feel that I just re-jigged slightly what Gary had already said, and his examples of the .animate() functions do now tie in with what we've said.  They also show you how you can essentially modify the .show() function, which was your original question.

If it's ok with you, would a split of the points be ok?

Rob
0
 

Author Comment

by:elepil
ID: 40472184
Rob, here is a portion of my original post.

"The show() function clearly animates by expanding the width, height, and  opacity in a certain way. Is there a way to alter that? For example, what if I wanted only the height to expand and not the width, or vice versa?"


Gary answered with the animate() function, which was not the function I was asking about. When you said, "it is predefined to animate the width, height and opacity only and at the same rate.  So it other words you can't edit it.", you said the two key things that I needed to know.

Gary has been pretty good in answering a lot of my past questions, and he has gotten quite a bit of points from me. I like to be generous, but I have to be fair. I give out points not only based on whether or not a responder gave me a correct answer, I also weight them based on how succinct and clear they were. In this case, you satisfied both criteria.

Had Gary just said I can't change it but have to use a different function, he would've gotten points. I go through great pains to make my question brief, simple, and specific, then I cross my fingers and hope responders would read it carefully. You apparently did, and your answer was concise, to-the-point, leaving me with nothing more to ask, that's why you got all the points.

For whatever it's worth, you are clearly a noble man for this request you made.
0
 
LVL 43

Expert Comment

by:Rob
ID: 40472317
Elepil,
Thank you for taking the time to respond and certainly understand and appreciate your point of view.

Rob
0

Featured Post

Containers and Docker for Everyone

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question