CODEWITHSUNDEEP
javascriptjquery
imjp
imjp

Reputation: 6695

jQuery's slideUp function not working properly for me

Please take a look at this fiddle.

My goal is to have a button to remotely slide up the image via a button, but instead it becomes small .

Anyone know the cause of this?

Upvotes: 2

Views: 559

Answers (3)

Didier Ghys
Didier Ghys

Reputation: 30676

The slideToggle method changes the height of the element. But I think because you slideToggle the image tag directly, the width is changed along with the height to keep the ratio.

Try setting explicitly a width you your image to the width stays.

DEMO

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337733

You need to put the image inside a container with overflow: hidden set to it, so that the browser doesn't resize the image itself and cause the distortion of the aspect ratio.

HTML

<div class="le_map_container"> <!-- overflow: hidden on this element -->
    <img src="http://bethhaim.spin-demo.com/wp-content/files_flutter/1330095469Untitled-5.jpg" height="200" class="le_map"/>
</div>

jQuery

$('.tour_map').click(function() {        
    $(".le_map_container").slideToggle();
});

Example fiddle

Upvotes: 2

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263157

The image element is trying to keep its aspect ratio, since you only specified a height and not a width.

Adding width="200px" solves your problem. You will find an updated fiddle here.

Upvotes: 3

Related Questions