CODEWITHSUNDEEP
jqueryjquery-animate
Keith
Keith

Reputation: 801

How can I make an image fadein and expand with jQuery 1.7

I've tried a variety of snippets of code, but can't get them to do what I want.

What I want to be able to do is to have an href, which will toggle an image from being hidden/faded out/shrunk, to being expanded/fully visible.

I've looked at the fadein/delay and also animate, but can't fathom out the syntax.

As a separate question, I'm doing this within a tab. Can I get the tab to then scroll if the image or the text after it, expands beyond the height defined for the tab?

#StockTakeSummaryPic {
width:1120px;
height:1px;}

function fncShowImage() {
$('#StockTakeSummaryPic').animate({
    opacity: 1,
    height: 'toggle'
}, 1000, function () {
    // Animation complete.
});
}


<a href="#" onclick="javascript:fncShowImage()">View</a>

Code added.

Thanks.

Upvotes: 0

Views: 515

Answers (2)

Hank
Hank

Reputation: 731

<script>
$('.pic-toggle').click(function(event) {
    event.preventDefault();
    $('#StockTakeSummaryPic').toggle("slow");
});
</script>


<a class='pic-toggle' href="#">View</a>

Try that.

Upvotes: 0

Henesnarfel
Henesnarfel

Reputation: 2139

First thing thats wrong is that you have the height set to 1px so when you toggle the height it is toggling between 0 and 1 so its not going to show anyway.

Check out my example here I've given three options toggle, fade and slide. You just have to change the function call to see how they work.

Upvotes: 1

Related Questions