Make Image Grow Larger On Press And Toggle

Question

On a website, I have a list of news articles mentioning a certain thing. I want the articles to be able to be pressed, and when they are, the image source will switch with the image source of the actual article, and the image will grow to an arbitrary size. When you click the image again, it should go back to normal. I also want it to set itself to be absolutely positioned or something that way it doesn't push elements out of its way when it grows.

I guess my first question would be, is there already a code snippet or easy implementation of this or something similar? I have not been able to find one.

Second, I am in the process of making my own, and for whatever reason, when the page loads, every image just fades to disappearing without anything being pressed. Here is my code so far...

$(".newsCover").toggle(function () {

$(this).animate({
    width: "auto",
    height: "1000px"
}, 1500);

}, function () {
    $(this).animate({
        width: "auto",
        height: "300px"
    }, 1500);

});

Can anyone tell me what is wrong with it and how to fix it? I have a feeling its just something really stupid...

Thanks so much!

From the code you've posted, images disappearing on load is a result of some other code running on page load. — ayyp, Jun 07 '13 at 18:26
I don't believe so, because earlier a function did work where I just pressed the images and they grew. — user1472065, Jun 07 '13 at 18:34
I just linked to google's version on their website so I assume it is the latest... — user1472065, Jun 07 '13 at 18:42
If you have any inclination that it might be from some of your other code, I'm going to suggest setting up a jsFiddle for yourself. That way you have a clean environment to test in. — zazvorniki, Jun 07 '13 at 18:52

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

The .animate() method allows us to create animation effects on any numeric CSS property.

All animated properties should be animated to a single numeric value, except as noted below;

http://api.jquery.com/animate/

However, you can hack it by determining the auto height/width as a hard number:

JavaScript jQuery Animate to Auto Height

edited May 23 '17 at 11:43

Community

1
1

answered Jun 07 '13 at 18:29

7stud

46,922
14
101
127

score 0 · Answer 2 · answered Jun 07 '13 at 18:46

0

The toggle function that you are using was deprecated in 1.8, and removed in 1.9, see here: http://api.jquery.com/toggle-event/ In v 1.9+, the toggle function now simply hides the element.

With no parameters, the .toggle() method simply toggles the visibility of elements

The parameters that can be passed to the new toggle function can be found here: http://api.jquery.com/toggle/ With the new toggle function, you are unable to run the .animate() function within it. To achieve what you're trying to do, you could do something like:

$(".newsCover").click(function() {
    if($(this).height() > 300) {
        $(this).animate({
             width: "auto",
             height: "1000px"
        }, 1500);
    }
    else {
        $(this).animate({
            width: "auto",
            height: "300px"
        }, 1500);
    }
});

answered Jun 07 '13 at 18:46

ayyp

6,590
4
33
47

@7stud I'm not completely sure. If unable to, then coupled with the link in your answer, he should be able to achieve what he wants. The main issue is the attempted use of `.toggle()` in a deprecated fashion. – ayyp Jun 07 '13 at 18:55
I deleted my comment because...there is a way to find out. :) And it does work for me, despite what the docs say. Maybe by specifying – 7stud Jun 07 '13 at 19:03
...an invalid value just causes jquery to ignore that property? – 7stud Jun 07 '13 at 19:08
auto 'works' for me. I just did another experiment that shows jQuery ignores the "auto". I used css to style a normal div to a height of 100px, and background: red. The I animated the height to "auto" and the width to 100px and the div's height remained at 100px – 7stud Jun 07 '13 at 19:16
In other words, I get the same effect by just leaving out height: "auto" in the jQuery animation. – 7stud Jun 07 '13 at 19:23
What he should do is just work out a percentage scale option for the image, that should solve the `auto` project. – ayyp Jun 07 '13 at 19:25

Make Image Grow Larger On Press And Toggle

2 Answers2